/* ============================================================
   Prime SMP — Tebex webstore theme
   Design system derived from the PrimeCombat Combat Rating
   leaderboard: minimal dark surfaces, one gold accent,
   Geist + Geist Mono, 1px lines, restrained motion.
   ============================================================ */

/* ------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------ */
:root {
  /* Surfaces */
  --color-bg: #0A0A0A;
  --color-bg-2: #0F0F0F;
  --color-card: #141414;
  --color-elev: #1B1B1B;
  --color-hover: #222222;
  --color-line: #2A2A2A;
  --color-line-strong: #3A3A3A;
  --color-brighter-bg: #141414;

  /* Text */
  --color-text: #F5F5F5;
  --color-text-darker: #D9D9D9;
  --color-text-secondary: #A6A6A6;
  --color-muted: #6E6E6E;
  --color-text-dark: #0F0F0F;

  /* Accent — the gold owns the store */
  --color-primary: #F7AA02;
  --color-primary-hover: #FFBD24;
  --color-primary-active: #D99000;
  --color-primary-text: #0F0F0F;
  --color-primary-text-hover: #0F0F0F;
  --accent-tint: rgba(247, 170, 2, 0.1);
  --accent-tint-strong: rgba(247, 170, 2, 0.28);

  /* Secondary / tertiary button colors */
  --color-secondary: #1B1B1B;
  --color-secondary-hover: #222222;
  --color-secondary-text: var(--color-text);
  --color-secondary-text-hover: var(--color-text);
  --color-tertiary: transparent;
  --color-tertiary-hover: rgba(255, 255, 255, 0.06);
  --color-tertiary-text: var(--color-text-secondary);
  --color-tertiary-text-hover: var(--color-text);

  /* Semantic */
  --color-success: #5FD68B;
  --color-warning: #F2C14E;
  --color-removed: #F0716F;
  --color-sale-banner-bg: var(--color-primary);
  --color-sale-banner-text: #0F0F0F;

  /* Shape */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  /* Type */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(247, 170, 2, 0.18);

  /* Layout */
  --btn-size: 42px;
  --btn-icon-size: 17px;
  --btn-icon-gap: 8px;
  --header-height: 64px;
  --widget-padding: 16px;
  --content-padding: var(--widget-padding);
  --content-inner-width: 1240px;
  --content-width: calc((var(--content-padding) * 2) + var(--content-inner-width));
  --sidebar-width: 264px;
  --bg-image: none;
  --page-transition-duration: 220ms;

  /* Tebex legal footer */
  --tebex-footer-height: 35px;
  --tebex-legal-footer-max-width: min(
    var(--content-inner-width),
    calc(100vw - (var(--content-padding) * 2))
  );
  --tebex-legal-footer-background-color: var(--color-bg-2);
  --tebex-legal-footer-border-color: var(--color-line);
  --tebex-legal-footer-text-color: var(--color-text-secondary);

  /* Icons (inline, single-color masks) */
  --icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E");
  --icon-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
  --icon-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v7h7'/%3E%3C/svg%3E");
  --icon-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21C7 16.5 3 13 3 8.7 3 6 5 4 7.5 4c1.7 0 3.3.9 4.5 2.4C13.2 4.9 14.8 4 16.5 4 19 4 21 6 21 8.7c0 4.3-4 7.8-9 12.3z'/%3E%3C/svg%3E");
  --icon-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 3 14h7l-1 8 11-13h-7z'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2 4 5v6c0 5 3.2 8.6 8 11 4.8-2.4 8-6 8-11V5z'/%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  --icon-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='7' rx='2'/%3E%3Crect x='2' y='14' width='20' height='7' rx='2'/%3E%3Cpath d='M6 6.5h.01'/%3E%3Cpath d='M6 17.5h.01'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5 5L20 7'/%3E%3C/svg%3E");
  --icon-plus-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
  --icon-discord: url("https://webstore-template-assets.tebex.io/images/discord.svg");
  --icon-basket: url("https://template-assets.tebex.io/images/checkout.svg");
  --icon-chevron: url("https://template-assets.tebex.io/images/chevron.svg");

  /* Brand fallback mark (Prime crown) */
  --brand-mark: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAASFBMVEX///+jYQD71Fr0owC5lmH6466/iyT679bXhgDnuGX2ryL72X23dAy9kkH95JX/+evklgOUYAvDfQL71WyzfyT8sQXypxSvawHIRVySAAAE6ElEQVR42s1ZC3vbKgwlZWmz1Td4c8/8///pjTECCQmM027ftDV1zONIR0fyo84D8H77n3/vh4/jcpbG6AQzT0v2D/ru0zznwdb4fQOkzbzPvzwtSHj7NBrICD65lld4tx9lZ/K3fEhhldj2DQs2QE5nx8tSV/zMLu+7J5bSjkRZmuELiZ75Vhbk6Y4P5+jBQSEookRQTCUOmprJSgCF5ZJYz/mnnXymKbNSHKVdPc+OpxwYbpZtC2t8jMvKs7wQAxnC5XSWKLgSWOqyJzIaJuRqnEcAil3y6ivhSV9oOi0AozWLgFMENg1GBDRcfBGxCcsBOSKOuQBBGZjUixB9yTwKMb5UTCqETJHMLNW0cJDVoXClZlAI8QFAjYKVTc4URHF51iUyOHyFBZ5PFoFsN0JQrEZLBerQior4Hq6WSdWvRPeQW8tc8MyxMoCrz8iaMJ3UYvdV+vNRlCl1s9K4ZLHz2kAfWIcZkyyqA4It4TJkDSqg0hRQhOuQi0kUDmSD9LB9BmcdVrE5FZxHnTnvZVNuGbwRvatbDSB7ZbVWd38bnOWgVgWsFAItNR1F57QmUUunZ5qAaty1BaYE4lxw0YK+57CEC0YRWGtuOuuytZpzfZujL5ndCnLuLdncpFxBOdFrZAJ0BGn/MPHEoifbLQcANPO6Q/EIJnG97FaIsx2BOgcGEFZeBPDt7lFV8oEJgA4vvr4vKhcHIRP0cmDBC42pSpZzzP5TcrAaxDdE7Og6K+fMZlvRAGMRcIrSDr9uRk3QaEgyhSC8EEiLoZKcAcK0QmuJJRm6Vlh8q+hFEDmgOZNR0wqgUSXrZNVBvI8sAKtRG1qmaEcgVERfQp60U9SU6drtVJwingMeAVer/5318SaGQyWfDD8OsA/8aAAkfDXaBACbtPtymxPAm2HhbR9Woy0AriIqh5iKBsA2XAMEC4A9jdQ77VN/NwAS2WMRpItuNXdafS+CMQDW03UEW8mgBRAmARDaKqJiDiZAh6KLARCaMvXQAGaSi6tTRVGI/6xWUVey1HsrB2L0eo92XRalonIP8wmAkADuBADjVUJzpxFrR1CeP74YACRTdk18HiBRdLUiyE8crpb0+QgYAAZUdArg+tj9mgDK04bjd4AaYDyUcH9ZklXXZHlf9BQ7sX7fl4Twvq7m+6LH5zxd1s2mn2e4ity/L6+XdV+92q0iAqxpzuU0wLJ8EMCloaJ4XbjtNrcAgkX+DvC63shmqSKwm/043AGwIDXAjbHi7AeaExSFVL8PALQfQKqHXhwDBCOCJoB+SjkECA+LH4Fy8LHO9TMRrCccDACEu7Itgtl6nHL6XSg+AaDd/boIIkWAN57ROgDBqoDQBuiqqJ/kEA4ANhWhBQCtorDrZFMK002CUvunOgCOc0AA945dl5fKlpFCGwa43l8MgI9CEVpXtGLfv/3Xs9eHfaQfsklHgDbAfIkWm++F2XpR3/P5bqvQtrXVOf7M6fcttdr0Uc5RCz6TgwjwWDKnXcRnRmBg8agt0ycM7beQ4wCjm/QmPB3B8EumA7dw9J7tKBo3HuynIuhvK3sMTsG7Qb3g2TDd8fboqAuHb3X/lorG0wp/Tld/O4JB54HzABjVB04VCNyXFFTnb1/u+fWdhti7+f2DScZTJB8F6j7RJA7+ePoP1sFTNe3w/LZDpfM/2bTlHrZg3x8AAAAASUVORK5CYII=");
}

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

/* ------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------ */
*,
*::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;
}

::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

/* Keyboard focus — visible, on brand */
:focus {
  outline: 0;
}
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100001;
  padding: 10px 16px;
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  translate: 0 calc(-100% - 16px);
  transition: translate 0.15s ease;
}
.skip-link:focus-visible {
  translate: 0 0;
}

/* ------------------------------------------------------------
   3. Page transitions (kept from preset, softened)
   ------------------------------------------------------------ */
@view-transition {
  navigation: auto;
}
::view-transition-group(root) {
  animation-duration: var(--page-transition-duration);
  animation-timing-function: ease;
}

@keyframes pageMoveOut {
  0% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes pageMoveIn {
  0%, 50% { opacity: 0; translate: 0 6px; }
  100% { opacity: 1; translate: 0 0; }
}
::view-transition-old(siteContent) {
  animation: var(--page-transition-duration) ease both pageMoveOut;
  transform-origin: center top;
}
::view-transition-new(siteContent) {
  animation: var(--page-transition-duration) ease both pageMoveIn;
  transform-origin: center top;
}
::view-transition-group(siteContent) {
  z-index: 2;
}
::view-transition-group(siteHeader),
::view-transition-group(siteNavigation),
::view-transition-group(siteBgImage),
::view-transition-group(siteFooter) {
  animation-duration: var(--page-transition-duration);
  animation-timing-function: ease;
  z-index: 3;
}
::view-transition-group(siteBgImage) {
  z-index: 1;
}

/* ------------------------------------------------------------
   4. Base
   ------------------------------------------------------------ */
html,
body {
  min-height: 100vh;
}

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

body {
  position: relative;
  max-width: 100%;
  width: 100%;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  accent-color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-height: 380px;
  z-index: -1;
  background: var(--bg-image) center center/cover no-repeat;
  mask-image: linear-gradient(rgba(0, 0, 0, 0.4), transparent);
  pointer-events: none;
  view-transition-name: siteBgImage;
}

::selection {
  color: #fff;
  background-color: rgba(247, 170, 2, 0.25);
  text-shadow: none;
}

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

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  color: var(--color-primary);
}

/* Section label — leaderboard signature */
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.section-label h2,
.section-label h3 {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.section-label .rule {
  flex: 1;
  height: 1px;
  background: var(--color-line);
}
.section-label .count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-muted);
  white-space: nowrap;
}

/* Rich text */
.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: 16px;
}
.text-content p:not(:last-child) {
  margin-bottom: 12px;
}
.text-content h1 { font-size: 28px; }
.text-content h2 { font-size: 23px; }
.text-content h3 { font-size: 19px; }
.text-content h4 { font-size: 16px; }
.text-content img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}
.text-content ol,
.text-content ul {
  margin-left: 1.2em;
}
.text-content ol:not(:last-child),
.text-content ul:not(:last-child) {
  margin-bottom: 12px;
}
.text-content li {
  display: list-item;
  margin-bottom: 4px;
}
.text-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.text-content a:hover {
  color: var(--color-primary-hover);
}
/* Buttons rendered inside prose containers keep their own colors */
.text-content a.btn-primary,
.text-content a.btn-secondary,
.text-content a.btn-tertiary,
.text-content a.btn-discord {
  color: var(--btn-color-text);
  text-decoration: none;
}
.text-content a.btn-primary:hover, .text-content a.btn-primary:focus-visible,
.text-content a.btn-secondary:hover, .text-content a.btn-secondary:focus-visible,
.text-content a.btn-tertiary:hover, .text-content a.btn-tertiary:focus-visible,
.text-content a.btn-discord:hover, .text-content a.btn-discord:focus-visible {
  color: var(--btn-color-text-hover);
}
.text-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.text-content table:not(:last-child) {
  margin-bottom: 12px;
}
.text-content th,
.text-content td {
  padding: 8px 10px;
  border: 1px solid var(--color-line);
  text-align: left;
}
.text-content th {
  background: var(--color-bg-2);
  font-weight: 600;
}

/* Icon glyphs (masks) */
.chip-icon,
.chip-action,
.value-icon,
.empty-icon,
span.nav-icon {
  display: inline-block;
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  mask: var(--icon, var(--icon-box)) center center/contain no-repeat;
}
.icon-home { --icon: var(--icon-home); }
.icon-category, .icon-box { --icon: var(--icon-box); }
.icon-page { --icon: var(--icon-page); }
.icon-heart { --icon: var(--icon-heart); }
.icon-bolt { --icon: var(--icon-bolt); }
.icon-shield { --icon: var(--icon-shield); }
.icon-copy { --icon: var(--icon-copy); }
.icon-server { --icon: var(--icon-server); }
.icon-discord { --icon: var(--icon-discord); }
.icon-basket { --icon: var(--icon-basket); }

/* Brand */
.brand-mark,
.brand-logo {
  display: block;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}
.brand-mark {
  background: var(--brand-mark) center center/contain no-repeat;
  image-rendering: pixelated;
}
.brand-text {
  display: block;
  line-height: 1.05;
  min-width: 0;
}
.brand-text strong {
  display: block;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-text span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  font-weight: 600;
}

/* ------------------------------------------------------------
   5. Buttons
   ------------------------------------------------------------ */
.btn-primary,
.btn-secondary,
.btn-tertiary,
.btn-discord {
  --btn-color-text: var(--color-text);
  --btn-color-text-hover: var(--btn-color-text);
  --btn-color-bg: var(--color-bg);
  --btn-color-bg-hover: var(--btn-color-bg);
  display: block;
  width: fit-content;
  height: var(--btn-size);
  padding: 0 16px;
  line-height: calc(var(--btn-size) - 2px);
  color: var(--btn-color-text);
  background-color: var(--btn-color-bg);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tertiary:disabled,
.btn-discord:disabled,
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-tertiary[disabled],
.btn-discord[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-primary:hover, .btn-primary:focus-visible,
.btn-secondary:hover, .btn-secondary:focus-visible,
.btn-tertiary:hover, .btn-tertiary:focus-visible,
.btn-discord:hover, .btn-discord:focus-visible {
  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);
  font-weight: 700;
}
.btn-primary:active {
  background-color: var(--color-primary-active);
}

/* Discord-branded login button (external auth) */
.btn-discord {
  --btn-color-text: #ffffff;
  --btn-color-text-hover: #ffffff;
  --btn-color-bg: #5865f2;
  --btn-color-bg-hover: #6b78f5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
}
.btn-discord:active {
  background-color: #4753d8;
}
.btn-discord .btn-brand-icon {
  width: 20px;
  height: 15px;
  flex: none;
}

.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);
  border: 1px solid var(--color-line);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: var(--color-line-strong);
}

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

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

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

.btn-icon-text {
  display: flex;
  align-items: center;
  min-width: var(--btn-size);
}
.btn-icon-text::before {
  content: "";
  display: block;
  margin-right: var(--btn-icon-gap);
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  flex: none;
  background: var(--btn-icon) center center/var(--btn-icon-size) no-repeat;
}

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

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

.btn-glyph-text {
  display: flex;
  align-items: center;
  justify-content: 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-text);
}

/* Loading spinner (replaces external loading.svg) */
@keyframes spin {
  to { rotate: 360deg; }
}

/* ------------------------------------------------------------
   6. Quantity stepper
   ------------------------------------------------------------ */
.quantity-field {
  --btn-size: 34px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  color: var(--color-text);
  background: var(--color-elev);
  height: calc(var(--btn-size) + 2px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.quantity-field:focus-within {
  border-color: var(--color-line-strong);
}
.quantity-field input[type=number] {
  position: relative;
  z-index: 1;
  flex: none;
  -moz-appearance: textfield;
  appearance: textfield;
  field-sizing: content;
  min-width: min(40px, var(--btn-size));
  height: var(--btn-size);
  font-size: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  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] {
  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: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease-in-out;
}
.quantity-field .open-basket:focus-visible,
.quantity-field .open-basket:hover {
  color: var(--color-primary);
}
.quantity-field .open-basket:focus-visible ~ input[type=number],
.quantity-field .open-basket:hover ~ input[type=number] {
  color: var(--color-primary);
}
.quantity-field .adjust {
  --btn-icon: url("https://template-assets.tebex.io/images/plus.svg");
  --btn-icon-size: 10px;
  position: relative;
  z-index: 2;
  flex: none;
  border-radius: 0;
}
.quantity-field .adjust.decrease {
  --btn-icon: url("https://template-assets.tebex.io/images/minus.svg");
  margin-right: auto;
  order: -1;
}
.quantity-field .adjust.increase {
  margin-left: auto;
  order: 100;
}
.quantity-field .adjust:disabled {
  opacity: 0.35;
}

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

/* ------------------------------------------------------------
   7. Site frame
   ------------------------------------------------------------ */
.site {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: calc(100vh - var(--tebex-footer-height));
  font-size: 14px;
  view-transition-name: site;
}

.site-content,
.store-quote {
  flex: 1 0 auto;
  width: 100%;
}

.site-content {
  margin: 0 auto;
  padding: var(--widget-padding) var(--content-padding) calc(var(--widget-padding) * 2);
}
@media (width > 960px) {
  .site-content {
    max-width: var(--content-width);
    padding-top: calc(var(--widget-padding) + 8px);
  }
}

/* Sidebar layout */
@media (width <= 960px) {
  .site-content-widgets {
    display: flex;
    flex-direction: column;
    gap: var(--widget-padding);
  }
}
@media (width > 960px) {
  .site-content-widgets {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    align-items: start;
    gap: 32px;
  }
  .site-content-widgets > main {
    order: 1;
  }
  body.is-sidebar-right .site-content-widgets > main {
    order: 0;
  }
  body.is-sidebar-right .site-content-widgets {
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
  }
}

.store-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--widget-padding);
  min-width: 0;
}
@media (width > 960px) {
  .store-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--widget-padding));
  }
}

/* ------------------------------------------------------------
   8. Header
   ------------------------------------------------------------ */
.site-header {
  position: relative;
  z-index: 40;
  background: rgba(10, 10, 10, 0.86);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  view-transition-name: siteHeader;
}
@media (width > 960px) {
  .site-header {
    position: sticky;
    top: 0;
  }
}

.site-header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
  padding: 0 var(--content-padding);
  width: 100%;
  max-width: var(--content-width);
  height: var(--header-height);
}

.header-start {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-radius: var(--radius-sm);
  transition: filter 0.15s ease;
}
.site-brand:hover {
  filter: brightness(1.08);
}

.toggle-navigation {
  --btn-icon: url("https://template-assets.tebex.io/images/burger.svg");
  --btn-icon-size: 20px;
  border-radius: var(--radius-sm);
}
@media (width > 960px) {
  .toggle-navigation {
    display: none;
  }
}

.header-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}
@media (width <= 960px) {
  .header-info {
    display: none;
  }
}

.header-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.header-chip:hover {
  color: var(--color-text);
  background: var(--color-hover);
  border-color: var(--color-line-strong);
}
.header-chip .chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26ch;
}
.header-chip.server .chip-text {
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.header-chip .chip-action {
  width: 13px;
  height: 13px;
  color: var(--color-muted);
  transition: color 0.15s ease;
}
.header-chip:hover .chip-action {
  color: var(--color-primary);
}

.header-end {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
@media (width <= 960px) {
  .header-end {
    margin-left: auto;
  }
}

.header-end .log-in,
.header-end .user-name {
  --btn-icon: url("https://template-assets.tebex.io/images/user.svg");
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Username → "Log out" hover swap (preset pattern, kept) */
.site-header .user-name {
  contain: paint;
  max-width: 220px;
}
.site-header .user-name .text-inner {
  overflow: hidden;
}
.site-header .user-name .text,
.site-header .user-name .text-hover {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: visibility 0.15s ease-in-out, opacity 0.15s ease-in-out;
}
.site-header .user-name .text-hover {
  margin-top: calc(var(--btn-size) * -1);
  color: var(--color-removed);
}
.site-header .user-name:not(:hover):not(:focus-within) .text-hover {
  visibility: hidden;
  opacity: 0;
}
.site-header .user-name:hover .text,
.site-header .user-name:focus-within .text {
  visibility: hidden;
  opacity: 0;
}
@media (width <= 960px) {
  .site-header .user-name {
    display: none;
  }
}

.open-basket.header-basket {
  --btn-icon: url("https://template-assets.tebex.io/images/checkout.svg");
  position: relative;
}
.basket-count {
  display: inline-block;
  min-width: 19px;
  margin-left: 8px;
  padding: 0 5px;
  border-radius: 10px;
  background: rgba(15, 15, 15, 0.18);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
@media (width <= 600px) {
  .open-basket.header-basket {
    justify-content: center;
    font-size: 0;
    color: transparent;
    width: var(--btn-size);
    padding: 0;
  }
  .open-basket.header-basket::before {
    margin-right: 0;
  }
  .open-basket.header-basket .basket-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--color-bg);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
  }
}

/* Sale / announcement banner */
.site-sale-banner {
  position: relative;
  padding: 10px var(--content-padding);
  color: var(--color-sale-banner-text);
  background: var(--color-sale-banner-bg);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}
.site-sale-banner .sale-banner-inner {
  display: block;
  margin: 0 auto;
  max-width: var(--content-inner-width);
  padding-right: 32px;
}
.sale-banner-dismiss {
  position: absolute;
  top: 0;
  right: calc(var(--content-padding) - 10px);
  bottom: 0;
  width: 32px;
  opacity: 0.65;
  line-height: 0;
  font-size: 0;
  color: transparent;
  transition: opacity 0.15s ease;
}
.sale-banner-dismiss::before {
  content: "";
  display: block;
  margin: auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  color: var(--color-sale-banner-text);
  mask: url("https://template-assets.tebex.io/images/close.svg") center center/contain no-repeat;
}
.sale-banner-dismiss:hover {
  opacity: 1;
}

/* ------------------------------------------------------------
   9. Navigation
   ------------------------------------------------------------ */
.site-navigation {
  --fade-duration: 200ms;
  view-transition-name: siteNavigation;
}

.site-navigation .nav-icon {
  width: 17px;
  height: 17px;
  color: var(--color-muted);
  transition: color 0.15s ease;
}
.site-navigation img.nav-icon {
  object-fit: contain;
  border-radius: 4px;
  image-rendering: pixelated;
}
.site-navigation a:hover .nav-icon,
.site-navigation a.link-active .nav-icon {
  color: var(--color-primary);
}
.site-navigation .nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Mobile drawer (<=960px) --- */
@media (width <= 960px) {
  .site-navigation {
    position: fixed;
    inset: 0;
    z-index: 100000;
    padding: 0;
    background: rgba(0, 0, 0, 0.64);
    transition: display var(--fade-duration) allow-discrete, opacity var(--fade-duration) ease;
  }
  @starting-style {
    .site-navigation {
      opacity: 0;
    }
  }
  body:not(.show-navigation) .site-navigation {
    visibility: hidden;
    opacity: 0;
  }
  .site-navigation.drawer {
    user-select: none;
  }
  .site-navigation .close-navigation {
    --btn-icon: url("https://template-assets.tebex.io/images/close.svg");
    --btn-icon-size: 22px;
    position: absolute;
    top: 10px;
    left: calc(min(320px, 84vw) - 52px);
    z-index: 2;
    border-radius: var(--radius-sm);
  }
  .site-navigation .menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0 auto 0 0;
    width: min(320px, 84vw);
    padding: 12px 14px calc(var(--widget-padding) * 1.5);
    background: var(--color-bg-2);
    border-right: 1px solid var(--color-line);
    line-height: 24px;
    color: var(--color-text-secondary);
    font-size: 15px;
    overflow: hidden auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-line-strong) var(--color-bg-2);
    transition: opacity var(--fade-duration) ease, scale var(--fade-duration) ease, translate var(--fade-duration) ease;
  }
  @starting-style {
    .site-navigation .menu {
      translate: -100% 0;
    }
  }
  .site-navigation.drawer .menu::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 7px;
    bottom: 0;
    margin-block: auto;
    width: 4px;
    height: 100px;
    background: rgb(from var(--color-text-secondary) r g b/0.33);
    border-radius: 2px;
    pointer-events: none;
  }
  body:not(.show-navigation) .site-navigation .menu {
    translate: -100% 0;
  }
  .site-navigation.touching .menu {
    transition: opacity var(--fade-duration) ease, scale var(--fade-duration) ease;
  }
  body:not(.show-navigation) .site-navigation .menu {
    opacity: 0.8;
    scale: 0.98;
  }
  .site-navigation.may-close .menu {
    opacity: 0.8;
  }

  .nav-mobile-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--color-line);
  }

  .site-navigation ul ul {
    padding-left: 28px;
    line-height: 22px;
    font-size: 14px;
  }
  .site-navigation li {
    position: relative;
    width: 100%;
  }
  .site-navigation .log-out {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
  }
  .site-navigation .log-out a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-removed);
  }
  .site-navigation .log-out a::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    mask: url("https://template-assets.tebex.io/images/log-out.svg") center center no-repeat;
    mask-size: contain;
  }
  .site-navigation .has-children {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .site-navigation .has-children > a {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .site-navigation .has-children .toggle {
    --btn-size: 38px;
    --btn-icon: url("https://template-assets.tebex.io/images/chevron.svg");
    --btn-icon-size: 18px;
    border-radius: var(--radius-sm);
  }
  .site-navigation .has-children .toggle::before {
    transition: rotate 0.15s ease-in-out;
  }
  .site-navigation .has-children.expanded > .toggle::before {
    rotate: 180deg;
  }
  .site-navigation .has-children > ul {
    width: 100%;
  }
  .site-navigation .has-children:not(.expanded) > ul {
    display: none;
  }
  .site-navigation a,
  .site-navigation .nav-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  }
  .site-navigation a:hover,
  .site-navigation .nav-chip:hover {
    color: var(--color-text);
    background: var(--color-hover);
  }
  .site-navigation a.link-active {
    color: var(--color-primary);
    background: var(--accent-tint);
    font-weight: 600;
  }
  .site-navigation ul ul a {
    padding: 8px 10px;
  }

  .nav-server,
  .nav-discord {
    margin-top: 4px;
  }
  .nav-server {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-line);
  }
  .nav-chip .nav-label {
    font-family: var(--font-mono);
    font-size: 13px;
  }
  .nav-discord .nav-chip .nav-label {
    font-family: var(--font-sans);
    font-size: 14px;
  }
  .nav-chip .nav-hint {
    margin-left: auto;
    flex: none;
    font-size: 11px;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
}

/* --- Horizontal nav (opt-in via template options) --- */
@media (width > 960px) {
  .navigation-horizontal .close-navigation {
    display: none;
  }
  .navigation-horizontal .menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 auto;
    padding: 8px var(--content-padding);
    width: 100%;
    max-width: var(--content-width);
    line-height: 26px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
  }
  .navigation-horizontal .menu > li > a {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
  }
  .navigation-horizontal .menu > li.has-children > a {
    padding-right: 4px;
  }
  .navigation-horizontal ul ul {
    line-height: 24px;
    font-size: 14px;
    font-weight: 400;
  }
  .navigation-horizontal > ul > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 22ch;
  }
  .navigation-horizontal .has-children {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .navigation-horizontal .has-children .toggle {
    --btn-size: 28px;
    --btn-icon: url("https://template-assets.tebex.io/images/chevron.svg");
    --btn-icon-size: 16px;
    flex: none;
    border-radius: var(--radius-xs);
  }
  .navigation-horizontal .has-children .toggle::before {
    transition: rotate 0.15s ease-in-out;
  }
  .navigation-horizontal .has-children:hover > .toggle::before {
    rotate: 180deg;
  }
  .navigation-horizontal .has-children > ul {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: max-content;
    padding: 6px;
    background: var(--color-elev);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    transition: all 0.15s ease-in-out;
    z-index: 10;
  }
  .navigation-horizontal .has-children:not(:hover):not(:focus-within) > ul {
    visibility: hidden;
    opacity: 0;
    translate: 0 -6px;
  }
  .navigation-horizontal a {
    display: block;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  }
  .navigation-horizontal a:hover {
    color: var(--color-text);
    background-color: var(--color-hover);
  }
  .navigation-horizontal a.link-active {
    color: var(--color-primary);
    background-color: var(--accent-tint);
  }
  .navigation-horizontal li li a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 28ch;
    padding: 7px 10px;
    border-radius: var(--radius-xs);
  }
}

/* --- Vertical nav (sidebar card, the default) --- */
@media (width > 960px) {
  .navigation-vertical.widget {
    padding: 10px;
  }
  .navigation-vertical .close-navigation {
    display: none;
  }
  .navigation-vertical .menu {
    line-height: 24px;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
  }
  .navigation-vertical ul ul {
    margin-left: 27px;
    padding-left: 8px;
    border-left: 1px solid var(--color-line);
    line-height: 22px;
    font-size: 13.5px;
  }
  .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;
    min-width: 0;
    max-width: calc(100% - 40px);
  }
  .navigation-vertical .has-children .toggle {
    --btn-size: 34px;
    --btn-icon: url("https://template-assets.tebex.io/images/chevron.svg");
    --btn-icon-size: 16px;
    flex: none;
    border-radius: var(--radius-xs);
  }
  .navigation-vertical .has-children .toggle::before {
    transition: rotate 0.15s ease-in-out;
  }
  .navigation-vertical .has-children.expanded > .toggle::before {
    rotate: 180deg;
  }
  .navigation-vertical .has-children > ul {
    width: 100%;
    padding-top: 2px;
    padding-bottom: 4px;
  }
  .navigation-vertical .has-children:not(.expanded) > ul {
    display: none;
  }
  .navigation-vertical a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  }
  .navigation-vertical a:hover {
    color: var(--color-text);
    background: var(--color-hover);
  }
  .navigation-vertical a.link-active {
    color: var(--color-primary);
    background: var(--accent-tint);
    box-shadow: inset 2px 0 0 var(--color-primary);
    font-weight: 600;
  }
  .navigation-vertical ul ul a {
    padding: 6px 10px;
  }
}

/* ------------------------------------------------------------
   10. Homepage
   ------------------------------------------------------------ */
.store-home {
  display: flex;
  flex-direction: column;
  gap: calc(var(--widget-padding) * 1.75);
  min-width: 0;
}

.home-hero {
  position: relative;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 36px);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.home-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
}
.home-hero-copy .eyebrow {
  margin-bottom: 10px;
}
.home-hero-title {
  font-size: clamp(26px, 4.5vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.home-hero-sub {
  max-width: 56ch;
  color: var(--color-text-secondary);
  font-size: 14.5px;
}
.home-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.hero-ip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--btn-size);
  padding: 0 14px;
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.hero-ip:hover {
  background: var(--color-hover);
  border-color: var(--color-line-strong);
}
.hero-ip-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}
.hero-ip-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
}
.hero-ip .chip-action {
  width: 14px;
  height: 14px;
  color: var(--color-muted);
  transition: color 0.15s ease;
}
.hero-ip:hover .chip-action {
  color: var(--color-primary);
}
.hero-discord {
  --btn-icon: var(--icon-discord);
}

.home-section {
  display: flex;
  flex-direction: column;
  gap: var(--widget-padding);
  min-width: 0;
}

/* Category cards */
.site-home-categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 12px;
}
.site-home-categories .category {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 600;
  min-width: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, translate 0.15s ease;
}
.site-home-categories .category:hover {
  background: var(--color-hover);
  border-color: var(--color-line-strong);
  translate: 0 -2px;
}
/* 26px, down from 40px (2026-08-16). At 40 the glyph was the loudest thing on a
   card whose job is to carry a category NAME, and a panel-uploaded image — often
   a detailed item render — competed with the label rather than tagging it. The
   card keeps its height either way; only the icon shrinks. */
.site-home-categories .category .image {
  flex: none;
  width: 26px;
  height: 26px;
  object-fit: contain;
  image-rendering: pixelated;
}
.site-home-categories .category .image-default {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
}
.site-home-categories .category .image-default::before {
  content: "";
  display: block;
  position: absolute;
  /* Was 4px against a 40px box — the same ratio at 26px, so the fallback glyph
     keeps the optical size of an uploaded image rather than shrinking twice. */
  inset: 2px;
  background-color: var(--color-muted);
  mask: url("https://template-assets.tebex.io/images/package-default.svg") center center/contain no-repeat;
}
.site-home-categories .category-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-home-categories .category-arrow {
  margin-left: auto;
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--color-muted);
  mask: var(--icon-chevron) center center/contain no-repeat;
  rotate: -90deg;
  transition: background-color 0.15s ease, translate 0.15s ease;
}
.site-home-categories .category:hover .category-arrow {
  background-color: var(--color-primary);
}

/* Homepage rich text from the store owner */
.home-description {
  padding: var(--widget-padding);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}

/* Value props */
.value-props {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 12px;
}
.value-prop {
  padding: 20px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
/* icon tile: tinted square with the glyph drawn via ::before */
.value-prop .value-icon {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-strong);
  border-radius: var(--radius-sm);
  mask: none;
  -webkit-mask: none;
}
.value-prop .value-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background-color: var(--color-primary);
  mask: var(--icon) center center/contain no-repeat;
}
.value-prop h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.value-prop p {
  color: var(--color-text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}

/* How it works */
.how-it-works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 12px;
  counter-reset: step;
}
.how-step {
  position: relative;
  padding: 20px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.how-num {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
}
.how-num::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 6px;
  background: var(--accent-tint-strong);
}
.how-step h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}
.how-step p {
  color: var(--color-text-secondary);
  font-size: 13.5px;
  line-height: 1.55;
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item {
  border-bottom: 1px solid var(--color-line);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--color-muted);
  mask: var(--icon-chevron) center center/contain no-repeat;
  transition: rotate 0.15s ease;
}
.faq-item summary:hover {
  background: var(--color-hover);
}
.faq-item[open] summary::after {
  rotate: 180deg;
}
.faq-item[open] summary {
  color: var(--color-primary);
}
.faq-item p {
  padding: 0 18px 16px;
  color: var(--color-text-secondary);
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 80ch;
}

/* Support CTA */
.support-cta {
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 24px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.support-cta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
}
.support-cta h3 {
  font-size: 17px;
  margin-bottom: 4px;
}
.support-cta p {
  color: var(--color-text-secondary);
  font-size: 13.5px;
}

/* ------------------------------------------------------------
   11. Category page
   ------------------------------------------------------------ */
.store-products {
  display: flex;
  flex-direction: column;
  gap: var(--widget-padding);
  min-width: 0;
}

.category-header {
  display: flex;
  flex-direction: column;
  gap: var(--widget-padding);
}

.category-description {
  padding: var(--widget-padding);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  font-size: 14px;
}

.no-products {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  font-size: 15px;
  text-align: center;
}
.no-products .empty-icon {
  width: 36px;
  height: 36px;
  color: var(--color-muted);
}

/* Grids */
.store-products-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.store-products-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 14px;
}

/* Homepage featured strip */
.home-featured .sale-flag {
  flex: none;
  padding: 3px 9px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   12. Package card
   ------------------------------------------------------------ */
.store-product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--widget-padding);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, translate 0.15s ease, background-color 0.15s ease;
}
.store-products-images .store-product:hover,
.store-products-list .store-product:hover {
  border-color: var(--color-line-strong);
  translate: 0 -2px;
}

.store-product .product-title {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.store-product .product-title a {
  color: inherit;
  transition: color 0.15s ease-in-out;
}
.store-product .product-title a:hover {
  color: var(--color-primary);
}
.store-product .countdown {
  display: block;
  margin-top: 4px;
  color: var(--color-removed);
  font-size: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.store-product .countdown::before {
  content: "";
  display: inline-block;
  vertical-align: -0.15em;
  margin-right: 0.35em;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask: url("https://template-assets.tebex.io/images/countdown.svg") center center/contain no-repeat;
}

.store-product .image-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(var(--widget-padding) * -1) calc(var(--widget-padding) * -1) 0;
  padding: 18px;
  aspect-ratio: 5 / 3;
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
}
.store-product .image-link .image {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  image-rendering: pixelated;
  transition: scale 0.2s ease;
}
.store-product .image-link:hover .image {
  scale: 1.04;
}
.store-product .image-link:hover ~ .product-title a {
  color: var(--color-primary);
}
.store-product .image {
  margin: 0 auto;
  max-width: 100%;
}
.store-product .image-default {
  position: relative;
  width: 96px;
  aspect-ratio: 1;
}
.store-product .image-default::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(72px, 100%);
  height: min(72px, 100%);
  background-color: rgb(from var(--color-muted) r g b/0.8);
  mask: url("https://template-assets.tebex.io/images/package-default.svg") center center/contain no-repeat;
}

/* Tags */
.product-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.tag-sale {
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-family: var(--font-mono);
}
.tag-limited {
  background: rgba(240, 113, 111, 0.14);
  border: 1px solid rgba(240, 113, 111, 0.4);
  color: var(--color-removed);
}
.tag-subscription {
  background: var(--color-elev);
  border: 1px solid var(--color-line-strong);
  color: var(--color-text-secondary);
}
.tag-current {
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-strong);
  color: var(--color-primary);
}

/* Price + actions */
.store-product .descr {
  color: var(--color-text-secondary);
  font-size: 13.5px;
}
.store-product .actions {
  display: flex;
  gap: 10px;
  position: relative;
}
.store-product .actions.updating {
  pointer-events: none;
}
/* Hidden outright, not dimmed to 0.3. The spinner is centred on this row and the
   row is only ever one or two buttons tall, so a ghost of the label sat directly
   under the ring and read as a rendering glitch rather than as "working". opacity
   keeps the row's size, so nothing below it moves while the request is in flight. */
.store-product .actions.updating > * {
  opacity: 0;
}
.store-product .actions.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 26px;
  height: 26px;
  border: 3px solid var(--accent-tint-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.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 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.store-product .price .discount {
  color: var(--color-muted);
  font-weight: 500;
  text-decoration-line: line-through;
}
.store-product .price strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.store-product .price .price-period {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.store-product .price .price-note {
  font-family: var(--font-sans);
}
.store-product:not(.store-product-full) .price {
  width: 100%;
}
.store-products-images .store-product:not(.store-product-full) .price {
  margin-bottom: auto;
}
.store-product .quantity-field {
  --btn-size: 40px;
}
.store-product .half {
  /* pairs sit side by side when they fit, stack when they don't */
  flex: 1 1 auto;
  min-width: calc(50% - 5px);
}
.store-product .wide {
  flex: 1 1 auto;
}
/* Unpurchasable state: visible reason instead of a dead disabled button */
/* ------------------------------------------------------------
   Gifting

   The toggle is a square .btn-icon sitting directly beside "Add to Basket":
   that button keeps `wide` (flex: 1 1 auto) and simply yields the 42px. The
   username row is a separate flex child at flex-basis:100%, so it always drops
   onto its own line instead of crushing the buttons into unusable slivers.

   The icon is an inline data URI rather than a template-assets.tebex.io file -
   Tebex publishes plus.svg and delete.svg, but there is no documented gift.svg
   and a 404 there would leave a blank square with no way to tell why.
   ------------------------------------------------------------ */
.gift-open.btn-icon {
  --btn-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'/%3E%3Crect x='2' y='7' width='20' height='5'/%3E%3Cline x1='12' y1='22' x2='12' y2='7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'/%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'/%3E%3C/svg%3E");
}

/* The rank table stretches its buttons to fill the column
   (.rank-actions .btn-secondary { width: 100% }), which turned the square icon
   into a wide slab and squeezed "Add to Basket" down to "Ad". The icon keeps its
   own footprint everywhere; only the buy button flexes. */
.rank-actions .gift-open.btn-icon {
  flex: none;
  width: var(--btn-size);
  min-width: var(--btn-size);
}

/* Gift dialog */
.gift-content {
  max-width: 420px;
}
.gift-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gift-title {
  margin: 0;
  /* .popup-close is 38px wide at right: 6px, so the title has to clear 44px or a
     long package name runs under the ✕. */
  padding-right: 44px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.gift-note {
  margin: -4px 0 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.gift-username {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  color: var(--color-text);
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-family: var(--font-mono);
  transition: border-color 0.15s ease;
}
.gift-username::placeholder {
  color: var(--color-muted);
}
.gift-username:focus {
  outline: none;
  border-color: var(--color-primary);
}
.gift-actions {
  position: relative;
  display: flex;
  gap: 10px;
}
.gift-actions > * {
  flex: 1 1 auto;
}
.gift-actions.updating {
  pointer-events: none;
}
.gift-actions.updating > * {
  opacity: 0;
}
.gift-actions.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 26px;
  height: 26px;
  border: 3px solid var(--accent-tint-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
/* ------------------------------------------------------------
   Billing-term chooser (PRIME+)
   ------------------------------------------------------------
   The rows are rendered by rank-comparison.twig into a hidden .plan-options
   inside .rank-actions and cloned into the dialog by main.js, so they are
   styled once and only ever SEEN in the dialog. The source block must stay
   display:none while hidden — .rank-actions is a flex row, and a flex child
   ignores the `hidden` attribute's UA display:none unless it is restated.
   ------------------------------------------------------------ */
.plan-options[hidden] {
  display: none;
}
.plan-options-live {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-option-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  text-align: left;
  color: var(--color-text);
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.plan-option:hover {
  border-color: var(--color-line-strong);
  background: var(--color-hover);
}
.plan-option.is-selected {
  border-color: var(--color-primary);
  background: var(--accent-tint);
}
.plan-option:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The radio dot. Drawn rather than an <input> so the whole row is one control
   and the hit area is the row, not a 16px circle. */
.plan-option-mark {
  flex: none;
  width: 17px;
  height: 17px;
  border: 2px solid var(--color-line-strong);
  border-radius: 50%;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.plan-option.is-selected .plan-option-mark {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 3.5px var(--color-primary);
}

.plan-option-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.plan-option-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
}
.plan-option-save {
  padding: 2px 6px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.plan-option-note {
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.35;
}
/* What the term unlocks. Gold, because it is the one line that differs between
   otherwise identical terms and the reason to read past the price. */
.plan-option-unlock {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
}
.plan-option-unlock::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  mask: var(--icon-plus-circle) center / contain no-repeat;
  -webkit-mask: var(--icon-plus-circle) center / contain no-repeat;
}
/* There is no "empty" variant of this rule on purpose: a plan that unlocks
   nothing leaves `unlock` blank in PLUS_PLANS and the element is never rendered,
   rather than printing a greyed-out line about what you do not get. */

.plan-option-price {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.plan-option-total {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.plan-option-was {
  margin-right: 5px;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 600;
  text-decoration: line-through;
}
.plan-option-rate {
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
}

/* The one thing a longer term buys that the discount does not. Tinted rather
   than another grey paragraph, because it is the reason to scroll past the
   cheapest option. */
.plan-perk {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  padding: 11px 13px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 12.5px;
  line-height: 1.45;
}
.plan-perk-icon {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  background-color: var(--color-primary);
  mask: var(--icon-plus-circle) center / contain no-repeat;
  -webkit-mask: var(--icon-plus-circle) center / contain no-repeat;
}

/* Plan dialog shell — same skeleton as the gift dialog.
   Doubled-up selector on purpose: the generic `.popup-content { max-width: 560px }`
   is declared LATER in this file, so a bare `.plans-content` loses the tie on
   source order and silently does nothing. (`.gift-content` above is a live
   example of exactly that — it asks for 420px and renders 560.) */
.popup-content.plans-content {
  max-width: 480px;
}
.plans-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plans-title {
  margin: 0;
  /* Clears .popup-close (38px wide at right: 6px) */
  padding-right: 44px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.plans-note {
  margin: -4px 0 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.plans-actions {
  position: relative;
  display: flex;
  gap: 10px;
}
.plans-actions > * {
  flex: 1 1 auto;
}
.plans-actions.updating {
  pointer-events: none;
}
.plans-actions.updating > * {
  opacity: 0;
}
.plans-actions.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 26px;
  height: 26px;
  border: 3px solid var(--accent-tint-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@media (max-width: 420px) {
  /* The price column and the label stop fitting side by side long before the
     dialog does, so the row stacks: mark + label on top, price under it. */
  .plan-option {
    flex-wrap: wrap;
  }
  .plan-option-price {
    align-items: flex-start;
    text-align: left;
    padding-left: 29px;
    flex-basis: 100%;
  }
}

.store-product .unavailable-note {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-basis: 100%;
  margin: 0;
  color: var(--color-warning);
  font-size: 12.5px;
  line-height: 1.45;
}
.store-product .unavailable-note .unavailable-icon {
  flex: none;
  font-size: 12px;
}
.store-product .remove {
  --btn-icon: url("https://template-assets.tebex.io/images/delete.svg");
  flex: none;
}

/* Grid variant: align card internals across the row */
.store-products-images .store-product {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: subgrid;
}

/* List variant */
.store-products-list .store-product .image-link {
  margin: 0;
  padding: 8px;
  aspect-ratio: auto;
  width: 64px;
  height: 64px;
  flex: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}
.store-products-list .store-product .image {
  width: 48px;
}
.store-products-list .store-product .image-default {
  width: 48px;
  height: 48px;
}
.store-products-list .store-product .product-tag {
  position: static;
  width: fit-content;
  align-self: center;
  flex: none;
}
.store-products-list .store-product .actions {
  flex-wrap: nowrap;
  align-items: center;
}
.store-products-list .store-product .wide {
  flex: 0 1 auto;
}
.store-products-list .store-product .price {
  width: auto;
}
@media (width <= 600px) {
  .store-products-list .store-product .wide {
    width: 100%;
  }
}
@media (width > 600px) {
  .store-products-list .store-product {
    flex-direction: row;
    align-items: center;
    gap: 12px 16px;
  }
  .store-products-list .store-product .actions {
    gap: 12px;
  }
  .store-products-list .store-product .actions .wide {
    min-width: 170px;
  }
  .store-products-list .store-product .product-title {
    margin-right: auto;
  }
}

/* ------------------------------------------------------------
   13. Package detail (page + popup)
   ------------------------------------------------------------ */
.store-product-full {
  display: grid;
  /* minmax(0, 1fr) keeps the track at container width — an auto track grows
     to the media slider's min-content and overflows small screens */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--widget-padding);
}
.store-product-full,
.store-product-full.popup-content {
  padding-bottom: 0;
}
.store-products-images .store-product-full:hover {
  translate: none;
}
.store-product-full .product-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.store-product-full > .image {
  max-width: 100%;
  max-height: 380px;
  padding: 24px;
  margin: 0 auto;
  object-fit: contain;
  background: var(--color-bg-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  width: 100%;
  image-rendering: pixelated;
}
.store-product-full > .image-default {
  width: 100%;
  aspect-ratio: 3 / 1;
  background: var(--color-bg-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.store-product-full .actions {
  position: sticky !important;
  bottom: 0;
  z-index: 2;
  align-items: center;
  order: 1;
  margin: 0 calc(var(--widget-padding) * -1);
  padding: var(--widget-padding);
  background-color: rgba(15, 15, 15, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-line);
}
.store-product-full .actions .half,
.store-product-full .actions .wide {
  flex: 0 1 220px;
}
.store-product-full .price {
  margin-right: auto;
  width: auto;
}
.store-product-full .price strong {
  font-size: 22px;
}
.store-product-full .descr {
  font-size: 14px;
  color: var(--color-text-darker);
}
@media (width <= 600px) {
  .store-product-full .actions {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .store-product-full .price {
    flex: 1 0 100%;
  }
  .store-product-full .actions .half,
  .store-product-full .actions .wide {
    flex: 1 1 140px;
  }
}

.delivery-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 13px;
}
.delivery-note .chip-icon {
  color: var(--color-primary);
}

/* Options form (page + popup) */
.store-product-options .product-title {
  margin-bottom: 12px;
  font-size: 19px;
  font-weight: 600;
}
/* Only in the popup, where a .popup-close (38px at right: 6px) sits over the
   corner: "Adding Team Customisation Bundle to your Basket" ran under the ✕.
   The standalone /checkout/packages/add page has no close button, so it keeps
   the full width. */
.popup .store-product-options .product-title {
  padding-right: 44px;
}
.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;
}
/* Same reason as .store-product .actions.updating - this is the row the spinner
   was landing on top of "Skip Login" in. */
.store-product-options .actions.updating > * {
  opacity: 0;
}
.store-product-options .actions.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 26px;
  height: 26px;
  border: 3px solid var(--accent-tint-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.store-product-options .actions .btn-primary,
.store-product-options .actions .btn-secondary,
.store-product-options .actions .btn-tertiary {
  width: 230px;
  max-width: 100%;
}
.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;
}

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

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

/* ------------------------------------------------------------
   15. Tiered categories — rank comparison
   ------------------------------------------------------------ */
.store-category-tiered {
  --gap: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--widget-padding);
  min-width: 0;
}

.store-category-tiered-header {
  display: flex;
  flex-direction: column;
  gap: var(--widget-padding);
  font-size: 14px;
}
.store-category-tiered-header .section-label h2 {
  font-size: 13.5px;
  margin-bottom: 0;
}
.store-category-tiered-header p {
  color: var(--color-text-secondary);
  max-width: 76ch;
}

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

.store-product-tiered {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: var(--gap);
  padding: 20px;
}
.store-product-tiered:hover {
  translate: none;
  border-color: var(--color-line-strong);
}
.store-product-tiered.subscribed {
  border-color: var(--accent-tint-strong);
  background: linear-gradient(to bottom, var(--color-card), rgba(247, 170, 2, 0.04));
}
.store-product-tiered .product-tag {
  top: 12px;
  left: auto;
  right: 12px;
}
.store-product-tiered .image {
  margin: auto;
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
}
.store-product-tiered .product-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.store-product-tiered .countdown {
  display: block;
  margin-top: 4px;
  color: var(--color-removed);
  font-size: 12px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.store-product-tiered .descr {
  padding-block: var(--gap);
  border-block: 1px solid var(--color-line);
  color: var(--color-text-secondary);
  font-size: 13.5px;
}
.store-product-tiered .descr ul {
  margin-left: 0;
}
.store-product-tiered .descr ul li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 7px;
}
.store-product-tiered .descr ul li::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  translate: 0 2px;
  background-color: var(--color-success);
  mask: var(--icon-check) center center/contain no-repeat;
}
.store-product-tiered .price {
  justify-content: center;
  text-align: center;
}
.store-product-tiered .actions {
  flex-direction: column;
  gap: 10px;
}
.store-product-tiered .actions .wide {
  width: 100%;
}

/* Tier quote */
.store-quote {
  margin: 0 auto;
  padding: var(--content-padding);
  max-width: 640px;
}
.store-quote .wide {
  flex: 1 1 50%;
}

/* ------------------------------------------------------------
   16. Text pages, forms, login
   ------------------------------------------------------------ */
.store-text {
  padding: var(--widget-padding);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  line-height: 1.55;
  font-size: 14.5px;
  font-weight: 400;
  min-width: 0;
}

.store-form {
  font-size: 15px;
}
.store-form h1,
.store-form h2,
.store-form h3,
.store-form h4,
.store-form h5,
.store-form h6,
.store-form p {
  margin-bottom: 16px;
}
.store-form .input-group,
.store-form .field,
.store-form .field-inline {
  margin-bottom: 20px;
}
.store-form .input-group > p,
.store-form .field > p,
.store-form .field-inline > p {
  margin-bottom: 10px;
  color: var(--color-text-darker);
  font-size: 14px;
}
.store-form .field-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
}
.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: 12px 14px;
  color: var(--color-text);
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.store-form input:focus,
.store-form select:focus,
.store-form textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}
.store-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6A6A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}
.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: 14px;
  font-weight: 600;
  margin: 0 12px;
}

/* Login */
.store-login {
  margin: 0 auto;
  max-width: 460px;
  padding: calc(var(--widget-padding) * 1.5);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  text-align: center;
}
.site-content > .store-login {
  margin-top: calc(var(--widget-padding) * 2);
}
.store-login .login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.store-login .login-brand .brand-mark,
.store-login .login-brand .brand-logo {
  width: 52px;
  height: 52px;
}
.store-login h2 {
  font-size: 21px;
  margin-bottom: 8px;
}
.store-login .login-hint {
  color: var(--color-text-secondary);
  font-size: 13.5px;
  max-width: 40ch;
  margin: 0 auto 20px;
}
.store-login .login-form input {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 15px;
}
.store-login .wide {
  width: 100%;
}
.store-login .login-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--color-muted);
  font-size: 12px;
}
.store-login .login-note .chip-icon {
  width: 13px;
  height: 13px;
}

/* Login popup variant */
.login-popup-content .login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.login-popup-content {
  text-align: center;
}
.login-popup-content .login-form input {
  text-align: center;
  font-family: var(--font-mono);
}
.login-popup-content .wide {
  width: 100%;
}
.login-popup-content .login-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--color-muted);
  font-size: 12px;
}

/* ------------------------------------------------------------
   17. Widgets (sidebar modules)
   ------------------------------------------------------------ */
.widget {
  padding: var(--widget-padding);
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  min-width: 0;
}
.widget + .widget {
  margin-top: 0;
}

.widget-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.widget .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.widget .badge-success {
  background: rgba(95, 214, 139, 0.12);
  border: 1px solid rgba(95, 214, 139, 0.35);
  color: var(--color-success);
}
.widget .badge-danger {
  background: rgba(240, 113, 111, 0.12);
  border: 1px solid rgba(240, 113, 111, 0.35);
  color: var(--color-removed);
}

.widget-featured .store-product {
  padding: 12px;
  background: var(--color-bg-2);
}
.widget-featured .store-product .image-link {
  margin: -12px -12px 0;
}

.widget-gift-card .gift-card-input {
  margin-bottom: 10px;
  width: 100%;
  padding: 11px 12px;
  color: var(--color-text);
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-mono);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.widget-gift-card .gift-card-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.widget-gift-card .check {
  width: 100%;
}
.widget-gift-card p {
  margin-top: 10px;
  font-size: 13px;
}

.alert {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.alert-danger {
  background: rgba(240, 113, 111, 0.1);
  border: 1px solid rgba(240, 113, 111, 0.35);
  color: var(--color-removed);
}
.alert-warning {
  background: rgba(242, 193, 78, 0.1);
  border: 1px solid rgba(242, 193, 78, 0.35);
  color: var(--color-warning);
}

.widget-recent .purchase {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 8px 0;
  line-height: 1.4;
}
.widget-recent .purchase:not(:last-child) {
  border-bottom: 1px solid var(--color-line);
}
.widget-recent .avatar {
  flex: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--radius-xs);
  border: 1px solid var(--color-line);
  background: var(--color-elev);
  image-rendering: pixelated;
}
.widget-recent .info {
  min-width: 0;
}
.widget-recent .username {
  font-weight: 600;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-recent .info p {
  color: var(--color-text-secondary);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.widget-recent .price {
  font-family: var(--font-mono);
  color: var(--color-text-darker);
}
.widget-recent .empty {
  color: var(--color-muted);
  text-align: center;
  padding: 12px 0;
}
.widget-recent time {
  color: var(--color-muted);
  font-size: 11.5px;
}
.widget-recent .sep {
  margin: 0 0.3em;
  color: var(--color-muted);
}

.widget-top-donator .widget-content {
  text-align: center;
}
.widget-top-donator .avatar {
  margin: 4px auto 12px;
  width: 72px;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-line);
  background: var(--color-elev);
  image-rendering: pixelated;
}
.widget-top-donator .username {
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-primary);
}
.widget-top-donator p {
  color: var(--color-text-secondary);
  font-size: 13px;
}
.widget-top-donator .empty {
  color: var(--color-muted);
}

.widget-community-goal .widget-content,
.widget-goal .widget-content {
  text-align: center;
}
.widget-community-goal p:not(:last-child),
.widget-goal p:not(:last-child) {
  margin-bottom: 10px;
}
.widget-community-goal p,
.widget-goal p {
  color: var(--color-text-secondary);
  font-size: 13px;
}
.widget-community-goal .progress,
.widget-goal .progress {
  height: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--color-elev);
  border-radius: 4px;
}
@keyframes progressBarAnimation {
  to {
    background-position: 100% 0;
  }
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--color-primary);
  transition: width 0.45s ease;
}
.widget-community-goal .progress-bar.striped,
.widget-goal .progress-bar.striped {
  background: var(--color-primary) linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 33%, rgba(255, 224, 138, 0.55) 33%, rgba(255, 224, 138, 0.55) 66%, var(--color-primary) 66%, var(--color-primary) 100%) repeat;
  background-size: 24px 100%;
}
.widget-community-goal .progress-bar.striped.animated,
.widget-goal .progress-bar.striped.animated {
  animation: progressBarAnimation 10s infinite linear;
}
.widget-community-goal .goal-image {
  margin: 0 auto 12px;
  max-width: 84px;
  image-rendering: pixelated;
}
.widget-community-goal .descr {
  margin-bottom: 12px;
  color: var(--color-text-secondary);
  font-size: 13px;
}

.widget-server-status .widget-content {
  text-align: center;
}
.widget-server-status h6 {
  display: inline-block;
  margin-bottom: 8px;
  padding: 7px 12px;
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.widget-server-status h6:hover {
  border-color: var(--color-line-strong);
  color: var(--color-primary);
}
.widget-server-status p {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.widget-text .widget-content {
  color: var(--color-text-secondary);
  font-size: 13.5px;
}

/* ------------------------------------------------------------
   18. Footer
   ------------------------------------------------------------ */
.site-footer {
  margin-top: calc(var(--widget-padding) * 1.5);
  background: var(--color-bg-2);
  border-top: 1px solid var(--color-line);
  view-transition-name: siteFooter;
}

.site-footer-inner {
  margin: 0 auto;
  padding: calc(var(--widget-padding) * 1.75) var(--content-padding) var(--widget-padding);
  width: 100%;
  max-width: var(--content-width);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--widget-padding) * 1.5);
}
@media (width > 700px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--widget-padding);
  }
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.footer-blurb {
  max-width: 40ch;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
}
.footer-server {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 12px;
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-server:hover {
  color: var(--color-text);
  border-color: var(--color-line-strong);
}
.footer-server .chip-action {
  width: 13px;
  height: 13px;
  color: var(--color-muted);
}
.footer-server:hover .chip-action {
  color: var(--color-primary);
}

.footer-title {
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-col a {
  color: var(--color-text-secondary);
  font-size: 13.5px;
  transition: color 0.15s ease;
}
.footer-col a:hover {
  color: var(--color-primary);
}

.we-accept {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.we-accept li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 8px;
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
}
.we-accept img {
  display: block;
  max-width: 38px;
  max-height: 16px;
}
.footer-note {
  margin-top: 12px;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 1.55;
  max-width: 34ch;
}

.footer-bottom {
  margin-top: calc(var(--widget-padding) * 1.5);
  padding-top: var(--widget-padding);
  border-top: 1px solid var(--color-line);
}
.footer-bottom .copyright {
  line-height: 1.5;
  color: var(--color-muted);
  font-size: 12px;
}

/* Tebex legal footer credit */
.site-footer-credit {
  color: var(--color-text-secondary);
  background: var(--color-bg-2);
  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;
}
.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);
}

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

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

.popup-content {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: var(--widget-padding);
  background: var(--color-bg-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  transition: translate var(--fade-duration) ease, opacity var(--fade-duration) ease;
}
@starting-style {
  .popup-content {
    translate: 0 16px;
  }
}
@media (pointer: coarse) {
  .popup-content {
    padding-bottom: calc(var(--widget-padding) * 2);
    border-radius: var(--radius) var(--radius) 0 0;
  }
}
.popup.touching .popup-content {
  transition: opacity var(--fade-duration) ease, scale var(--fade-duration) ease;
}
.popup.may-close .popup-content,
.popup.drawer[hidden] .popup-content {
  opacity: 0.8;
  scale: 0.97;
}
.popup.drawer-up[hidden] .popup-content {
  translate: 0 -100%;
}
.popup.drawer-down[hidden] .popup-content {
  translate: 0 100%;
}
.popup.drawer-right[hidden] .popup-content {
  translate: 100% 0;
}
.popup.drawer-left[hidden] .popup-content {
  translate: -100% 0;
}
.popup:not(.drawer)[hidden] .popup-content {
  translate: 0 16px;
}
.popup.popup-loading .popup-content {
  min-height: 180px;
}
.popup.popup-loading .popup-content::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  border: 3px solid var(--accent-tint-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.drawer-up .popup-content::after,
.drawer-down .popup-content::after,
.drawer-left .popup-content::after,
.drawer-right .popup-content::after {
  content: "";
  display: block;
  position: absolute;
  background: rgb(from var(--color-text-secondary) r g b/0.33);
  border-radius: 2px;
  pointer-events: none;
}
.drawer-up .popup-content::after,
.drawer-down .popup-content::after {
  left: 0;
  right: 0;
  margin-inline: auto;
  height: 4px;
  width: 100px;
}
.drawer-up .popup-content::after {
  bottom: 7px;
}
.drawer-down .popup-content::after {
  top: 7px;
}
.drawer-left .popup-content::after,
.drawer-right .popup-content::after {
  top: 0;
  bottom: 0;
  margin-block: auto;
  width: 4px;
  height: 100px;
}
.drawer-left .popup-content::after {
  right: 7px;
}
.drawer-right .popup-content::after {
  left: 7px;
}

.popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  opacity: 0.6;
  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/18px no-repeat;
}
@media (width <= 600px) {
  .popup-close {
    width: 46px;
    height: 46px;
  }
  .popup-close::before {
    mask-size: 22px;
  }
}
.popup-close:hover,
.popup-close:focus-visible {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.08);
}

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

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

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

/* ------------------------------------------------------------
   20. Basket
   ------------------------------------------------------------ */
.basket {
  position: relative;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}
.site-content .basket {
  display: none;
}
.basket .basket-empty {
  margin: auto;
  text-align: center;
  font-size: 16px;
  color: var(--color-text-secondary);
}

.basket .basket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 22px var(--widget-padding) 16px;
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px solid var(--color-line);
}
.basket .basket-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.basket .basket-title::before {
  content: "";
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  background-color: var(--color-primary);
  mask: var(--icon-basket) center center/contain no-repeat;
}
.basket .basket-second-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--widget-padding);
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.basket .basket-second-header .total {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--color-text-secondary);
}
.basket .basket-second-header .total strong {
  font-weight: 700;
}
.basket .basket-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.basket .basket-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--widget-padding);
}
.basket .basket-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}
.basket .basket-item-media {
  flex: none;
}
.basket .basket-item-image {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xs);
  image-rendering: pixelated;
}
.basket .basket-item-image.image-default {
  position: relative;
}
.basket .basket-item-image.image-default::before {
  content: "";
  position: absolute;
  inset: 10px;
  background-color: var(--color-muted);
  mask: url("https://template-assets.tebex.io/images/package-default.svg") center center/contain no-repeat;
}
.basket .basket-item .info {
  flex: 1;
  margin-right: auto;
  min-width: 140px;
}
.basket .basket-item .options {
  list-style-position: inside;
}
.basket .basket-item .options:has(li) {
  padding: 4px 0;
}
.basket .basket-item .options li {
  display: block;
  padding: 1px 0;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.basket .basket-item .options li::before {
  content: "";
  display: inline-block;
  margin-right: 0.5em;
  width: 3px;
  height: 3px;
  vertical-align: middle;
  background-color: var(--color-muted);
  border-radius: 50%;
}
.basket .basket-item .title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.basket .basket-item .title a {
  transition: color 0.15s ease;
}
.basket .basket-item .title a:hover {
  color: var(--color-primary);
}
.basket .basket-item .price {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.basket .basket-item .price strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}
.basket .basket-item .quantity-field {
  --btn-size: 32px;
}
.basket .basket-item .remove {
  --btn-size: 36px;
  --btn-icon: url("https://template-assets.tebex.io/images/delete.svg");
  --btn-icon-size: 17px;
  flex: none;
}
.basket .basket-item .remove:hover,
.basket .basket-item .remove:focus-visible {
  --btn-color-text-hover: var(--color-removed);
  border-color: rgba(240, 113, 111, 0.4);
}

.basket-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 48px 24px 24px;
  text-align: center;
}
.basket-empty-state .empty-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  color: var(--color-muted);
}
.basket-empty-state strong {
  font-size: 15px;
}
.basket-empty-state .basket-empty-hint {
  color: var(--color-muted);
  font-size: 13px;
}

.basket .basket-checkout {
  margin-top: auto;
  padding: var(--widget-padding);
  border-top: 1px solid var(--color-line);
  background: var(--color-bg-2);
}
.basket .basket-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.basket .basket-total-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.basket .basket-checkout .total {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  font-size: 14px;
}
.basket .basket-checkout .total strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.basket .basket-checkout .checkout {
  width: 100%;
  --btn-size: 46px;
}
.basket .basket-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  color: var(--color-muted);
  font-size: 11.5px;
}
.basket .basket-secure-note .chip-icon {
  width: 12px;
  height: 12px;
}

/* Basket drawer */
.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: min(440px, 100vw);
  height: 100vh;
  height: 100dvh;
  padding: 0;
  background: var(--color-bg-2);
  border: none;
  border-left: 1px solid var(--color-line);
  border-radius: 0;
  box-shadow: -24px 0 64px rgba(0, 0, 0, 0.45);
  transition: translate var(--fade-duration) cubic-bezier(0.3, 0.7, 0.2, 1);
}
@starting-style {
  .basket-popup-content {
    translate: 100% 0;
  }
}
:root .basket-popup[hidden] .basket-popup-content {
  translate: 100% 0;
}
.basket-popup-content .basket-header {
  padding-top: 18px;
  padding-right: 56px;
}
.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: 32px;
  height: 32px;
  border: 3px solid var(--accent-tint-strong);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.basket-popup-content.updating > * {
  filter: grayscale(100%);
  opacity: 0.7;
}

/* ------------------------------------------------------------
   20b. Currency picker
   ------------------------------------------------------------ */
.currency-picker {
  position: relative;
}
.currency-picker summary {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.currency-picker summary::-webkit-details-marker {
  display: none;
}
.currency-picker summary::after {
  content: "";
  width: 13px;
  height: 13px;
  background-color: var(--color-muted);
  mask: var(--icon-chevron) center center/contain no-repeat;
  transition: rotate 0.15s ease;
}
.currency-picker summary:hover {
  color: var(--color-text);
  background: var(--color-hover);
  border-color: var(--color-line-strong);
}
.currency-picker[open] summary::after {
  rotate: 180deg;
}
.currency-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  scrollbar-width: thin;
  scrollbar-color: var(--color-line-strong) var(--color-elev);
}
.currency-menu a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--radius-xs);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.currency-menu a:hover {
  color: var(--color-text);
  background: var(--color-hover);
}
.currency-menu a.active {
  color: var(--color-primary);
  background: var(--accent-tint);
}

/* Mobile currency row inside the nav drawer */
@media (width <= 960px) {
  .nav-currency {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 12px 10px 0;
    border-top: 1px solid var(--color-line);
  }
  .nav-currency-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
  }
  .nav-currency-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .site-navigation .nav-currency-list a {
    display: inline-block;
    width: auto;
    padding: 5px 10px;
    background: var(--color-elev);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
  }
  .site-navigation .nav-currency-list a.active {
    color: var(--color-primary);
    border-color: var(--accent-tint-strong);
    background: var(--accent-tint);
  }
}

/* ------------------------------------------------------------
   20c. Basket coupon / gift card redeem
   ------------------------------------------------------------ */
.basket .basket-redeem {
  position: relative;
  padding: 14px var(--widget-padding);
  border-top: 1px solid var(--color-line);
}
.basket .basket-redeem.updating {
  pointer-events: none;
  opacity: 0.6;
}
.basket .basket-redeem-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.basket .basket-redeem-controls {
  display: flex;
  gap: 8px;
}
.basket .coupon-input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.basket .coupon-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.basket .redeem-submit {
  --btn-size: 38px;
  flex: none;
}
.basket .redeemed {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.basket .redeemed:has(.redeemed-coupon) {
  margin-top: 10px;
}
.basket .redeemed-coupon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-strong);
  border-radius: var(--radius-xs);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}
.basket .redeemed-remove {
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color 0.15s ease;
}
.basket .redeemed-remove:hover {
  color: var(--color-removed);
}

/* ------------------------------------------------------------
   21. Toasts
   ------------------------------------------------------------ */
.toaster {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  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: 460px;
  pointer-events: none;
}
.toaster:empty {
  display: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 8px 10px 20px;
  background: var(--color-elev);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  transition: min-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
}
@starting-style {
  .toast {
    opacity: 0;
  }
}
.toast[hidden] {
  display: flex;
  opacity: 0;
  min-height: 0;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}
.toast.toast-warning::before {
  background: var(--color-warning);
}
.toast.toast-error::before {
  background: var(--color-removed);
}
.toast.toast-success::before {
  background: var(--color-success);
}
/* errors and successes get a tinted surface so they read at a glance,
   not just a 3px accent bar */
.toast.toast-error {
  background: #2A1514;
  border-color: rgba(240, 113, 111, 0.45);
}
.toast.toast-error p {
  color: #FFD7D6;
  font-weight: 600;
}
.toast.toast-success {
  background: #12241A;
  border-color: rgba(95, 214, 139, 0.4);
}
.toast.toast-warning {
  background: #2A2110;
  border-color: rgba(247, 170, 2, 0.4);
}
.toast p {
  min-width: 0;
}

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

/* ------------------------------------------------------------
   21b. Rank comparison table
   ------------------------------------------------------------ */
.rank-compare {
  display: flex;
  flex-direction: column;
  gap: var(--widget-padding);
  min-width: 0;
}

.rank-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-card);
  scrollbar-width: thin;
  scrollbar-color: var(--color-line-strong) var(--color-card);
}

.rank-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 720px;
  font-size: 13.5px;
}
/* Wide viewports only: equal-width rank columns. Auto layout sizes columns by
   content, so columns came out at visibly different widths from their price and
   button labels alone. Below this width the columns need their content-based
   sizing or the "Add to Basket" label gets clipped. */
@media (width > 1100px) {
  .rank-table {
    table-layout: fixed;
  }
  .rank-table .rank-corner {
    width: 190px;
  }
}
@media (width > 1240px) {
  .rank-table .rank-corner {
    width: 240px;
  }
}

.rank-table th,
.rank-table td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}
.rank-table tbody tr:last-child th,
.rank-table tbody tr:last-child td {
  border-bottom: none;
}

/* Sticky label column */
.rank-corner,
.rank-label {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left;
  background: var(--color-card);
  border-right: 1px solid var(--color-line);
  min-width: 190px;
  max-width: 240px;
}
.rank-label {
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-sans);
}
/* 2026-07-29: the label's grey second line is gone — a muted sub under every
   perk name read as clutter. That text is now the first line of the ? tooltip
   (.rank-help-sub). No <small> is emitted inside .rank-label any more. */

/* Column headers */
.rank-table thead th {
  background: var(--color-bg-2);
  vertical-align: top;
}
.rank-table thead .rank-corner {
  z-index: 3;
  background: var(--color-bg-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  vertical-align: middle;
}
.rank-col-head {
  min-width: 132px;
}
.rank-col-head-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rank-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-bottom: 4px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  transition: color 0.15s ease;
}
.rank-back:hover {
  color: var(--color-primary);
}
.rank-back-icon {
  width: 16px;
  height: 16px;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.15s ease;
}
.rank-back:hover .rank-back-icon {
  transform: translateX(-2px);
}
.rank-pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgb(from var(--rank) r g b / 0.5);
  background: rgb(from var(--rank) r g b / 0.12);
  color: var(--rank);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* The rank name carries the same per-character gradient the in-game prefix does
   (--rank-gradient, set inline from the RANKS block in rank-comparison.twig).
   `color` stays set as the fallback: a browser without -webkit-text-fill-color
   ignores the two lines below it and paints the flat signature colour instead of
   an invisible word, which is what plain `color: transparent` would have done. */
.rank-pill-name {
  color: var(--rank);
  background-image: var(--rank-gradient, linear-gradient(90deg, var(--rank), var(--rank)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 2026-08-16: EVERY rank pill is outlined, the featured one included. It used to
   be filled with its own colour so Prime and Prime+ — both gold, because both
   match the in-game prefixes — would not read as the same pill. The owner asked
   for one consistent style instead, so the two now separate themselves the way
   every other pair in the table does: by the featured column's background wash,
   not by a different shape. (They no longer differ by colour either — PRIME+ took
   Prime's #FBD23E on the owner's request later the same day.)

   To put the fill back, restore:
     .rank-col-head.rank-featured .rank-pill      { background: var(--rank-gradient, var(--rank)); border-color: transparent; }
     .rank-col-head.rank-featured .rank-pill-name { background: none; color: #0F0F0F; -webkit-text-fill-color: #0F0F0F; }
   Nothing else depends on it — the markup is identical either way. */

/* "Included with every rank" strip. Deliberately short — only perks that would
   otherwise be four identical ticks AND that no rank row explains better. */
.rank-includes {
  padding: 14px 16px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
}
.rank-includes-label {
  margin-bottom: 10px;
  color: var(--color-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rank-includes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rank-includes-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-darker);
  font-size: 13px;
}
.rank-includes-list .rank-yes {
  width: 18px;
  height: 18px;
  flex: none;
}
.rank-includes-list .rank-yes::before {
  width: 11px;
  height: 11px;
}

/* Row help — a small "?" after a perk name that reveals a sentence of detail
   on hover or keyboard focus. Two rows both reading "Workstations" with only a
   tiny /grindstone under them told a buyer nothing; the detail lives here now
   instead of padding every label out into prose.

   .rank-table-scroll is overflow-x: auto, which per spec makes overflow-y
   compute to auto as well, so a tip escaping the container on EITHER axis gets
   clipped. Two things keep it inside:

   Horizontally, the tip is a SIBLING of the button and so anchors to the
   sticky .rank-label cell, which is always pinned to the container's left
   edge. Anchoring it to the button instead put it 4-24px past the right edge
   on a 375px viewport, because the button's x drifts with the label length.

   Vertically, it opens downward over the following rows, and the
   :nth-last-child flip below sends the bottom rows upward instead. */
.rank-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  padding: 0;
  flex: none;
  vertical-align: middle;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}
.rank-help:hover,
.rank-help:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.rank-help-mark {
  pointer-events: none;
}

.rank-help-tip {
  position: absolute;
  left: 12px;
  top: calc(100% + 2px);
  z-index: 8;
  width: max-content;
  max-width: min(260px, calc(100vw - 52px));
  padding: 9px 11px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg-2);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
  color: var(--color-text-secondary);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* The concrete fact (a command, or a short list) leads the tip, brighter than
   the sentence that follows it. */
.rank-help-sub {
  display: block;
  margin-bottom: 5px;
  color: var(--color-text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.rank-help:hover ~ .rank-help-tip,
.rank-help:focus ~ .rank-help-tip {
  opacity: 1;
  visibility: visible;
}

/* Bottom rows open upward so the tip is not clipped by the scroll container */
.rank-table tbody tr:nth-last-child(-n+4) .rank-help-tip {
  top: auto;
  bottom: calc(100% + 2px);
}

/* The label column is sticky with z-index 2, so a later row would otherwise
   paint over a tip opening downward out of an earlier row. */
.rank-label:hover,
.rank-label:focus-within {
  z-index: 6;
}

/* Top-rank exclusives — a list beats twenty rows of X's */
.rank-plus {
  padding: 18px;
  background: var(--color-card);
  border: 1px solid var(--accent-tint-strong);
  border-radius: var(--radius);
}
.rank-plus-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.01em;
}
.rank-plus-head p {
  margin-top: 3px;
  margin-bottom: 14px;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.rank-plus-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rank-plus-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--color-text-darker);
}
.rank-plus-check {
  flex: none;
  margin-top: 2px;
  width: 14px;
  height: 14px;
  background-color: var(--color-primary);
  mask: var(--icon-check) center / contain no-repeat;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
}
.rank-plus-copy small {
  display: block;
  margin-top: 2px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Panel descriptions often arrive with empty <p> tags — don't reserve space */
.store-category-tiered-header p:empty,
.category-description p:empty {
  display: none;
}
.rank-price {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.rank-price strong {
  font: inherit;
  color: inherit;
}
.rank-price small {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
}
/* A price wearing affixes. Centring the three as one inline block centres the
   BLOCK, not the figure — "From" outweighs "/mo" by ~28px, so the number landed
   ~14px right of centre and stopped lining up with the plain prices in the other
   columns, which is exactly where the eye compares them.

   1fr / auto / 1fr puts the figure in a centre track with two equal flexible
   sides, so it is dead centre however wide the affixes are (a longer word in
   another locale, a "/yr", a currency symbol that grows). stretch is required:
   .rank-col-head-inner centres its children, which would otherwise shrink this
   to fit its content and collapse both 1fr tracks to zero. */
.rank-price-range {
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
}
.rank-price-range .rank-price-from {
  justify-self: end;
}
.rank-price-range small {
  justify-self: start;
  margin-left: 4px;
}

/* "From" on a multi-term rank. Deliberately quiet and NOT mono — it is a
   qualifier on the figure, not part of it, and setting it at the price's own
   weight made the column read "FROM $7.50" as one word. */
.rank-price-from {
  margin-right: 5px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.rank-price .discount {
  display: inline-block;
  margin-right: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: line-through;
}
.rank-sale-tag {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 7px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.rank-billing {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.rank-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}
.rank-actions .btn-primary,
.rank-actions .btn-secondary {
  width: 100%;
  --btn-size: 38px;
}
.rank-actions .add,
.rank-actions .subscribe {
  flex: 1;
  min-width: 0;
}

/* Featured column — a neutral raised panel, no ribbon/badge.
   2026-08-16: this wash used to be gold, rgba(247,170,2,.05/.08), running the
   full height of the table. Once PRIME+ took Prime's gold for its pill, the
   column was gold text on a gold field under a gold button, and the tint stopped
   reading as "this one is recommended" and started reading as brand furniture.
   White at very low alpha does the same job — it lifts the column off the page
   without claiming a colour — and it leaves the accent free for the things that
   should own it: the buy button, the save chips, the sale tags.
   To drop the highlight entirely, set featured: false on the rank in
   rank-comparison.twig rather than deleting these rules; the row-hover rule
   below keys off .rank-featured too. */
.rank-table .rank-featured {
  background: rgba(255, 255, 255, 0.022);
}
.rank-table thead th.rank-featured {
  background: rgba(255, 255, 255, 0.045);
}

/* Subtle separator between perk groups (replaces the old section bars) */
.rank-table tbody tr.rank-group-start > th,
.rank-table tbody tr.rank-group-start > td {
  border-top: 1px solid var(--color-line-strong);
}
.rank-table tbody tr:first-child.rank-group-start > th,
.rank-table tbody tr:first-child.rank-group-start > td {
  border-top: none;
}

/* Value cells */
.rank-cell {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.rank-cell.is-text {
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  font-size: 12.5px;
}
.rank-yes,
.rank-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  font-size: 0;
}
.rank-yes {
  background: rgba(95, 214, 139, 0.13);
  border: 1px solid rgba(95, 214, 139, 0.34);
}
.rank-yes::before {
  content: "";
  width: 13px;
  height: 13px;
  background-color: var(--color-success);
  mask: var(--icon-check) center / contain no-repeat;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
}
/* Softer than the check so a column of X's recedes and the greens read first */
.rank-no {
  background: rgba(240, 113, 111, 0.06);
  border: 1px solid rgba(240, 113, 111, 0.2);
}
.rank-no::before {
  content: "";
  width: 11px;
  height: 11px;
  background-color: rgba(240, 113, 111, 0.7);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6 18 18M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Row hover */
.rank-table tbody tr:hover .rank-cell:not(.rank-featured),
.rank-table tbody tr:hover th.rank-label {
  background: var(--color-hover);
}

.rank-compare-note {
  color: var(--color-muted);
  font-size: 12px;
}
.rank-compare-note a {
  color: var(--color-primary);
}

@media (width <= 600px) {
  .rank-table th,
  .rank-table td {
    padding: 10px;
  }
  .rank-corner,
  .rank-label {
    min-width: 150px;
  }
}

/* ------------------------------------------------------------
   21d. Bundle / bonus chip (marks a package on an otherwise normal card)
   ------------------------------------------------------------ */
.bundle-tag {
  /* align-self for the list/flex card, justify-self for the grid card — without
     the second one the chip stretches the full card width like a banner. */
  align-self: flex-start;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* sits directly above the title — pull them together so they read as a pair */
  margin-bottom: -5px;
  padding: 4px 9px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-tint-strong);
  border-radius: var(--radius-xs);
  color: var(--color-primary);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.bundle-tag-icon {
  flex: none;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  mask: var(--icon-box) center / contain no-repeat;
  -webkit-mask: var(--icon-box) center / contain no-repeat;
}
/* Coin packs reuse the chip whole — only the glyph changes, so a bonus and a
   bundle read as the same kind of promise. Full shorthand, not just mask-image,
   so it stands on its own regardless of source order. */
.bonus-tag-icon {
  mask: var(--icon-plus-circle) center / contain no-repeat;
  -webkit-mask: var(--icon-plus-circle) center / contain no-repeat;
}
.bundle-tag-save {
  padding-left: 7px;
  border-left: 1px solid var(--accent-tint-strong);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   22. Motion preferences
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05s !important;
    scroll-behavior: auto !important;
  }
}