/* THE COIL / TEBEX
   Plain CSS. Edit colors in Tebex Appearance or in the variables below.
   Load after Exo's existing CSS. Native checkout behavior stays with Tebex. */

body.coil-store {
  --coil-bg: #292631;
  --coil-panel: #35313e;
  --coil-panel-raised: #3c3646;
  --coil-accent: #c6a6e8;
  --coil-violet: #d5b8ef;
  --coil-teal: #acd0b1;
  --coil-cyan: #a6cedc;
  --coil-text: #f2ece6;
  --coil-soft: #d2c9d5;
  --coil-muted: #b9b1c1;
  --coil-line: #554c60;
  --coil-display: "Coil Nunito", ui-rounded, "Trebuchet MS", sans-serif;
  --coil-body: "Coil Nunito", "Segoe UI", system-ui, sans-serif;
  --coil-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --coil-radius: 22px;
  /* Exo's native controls inherit these theme variables. */
  --color-bg: var(--coil-bg);
  --color-brighter-bg: var(--coil-panel);
  --color-text: var(--coil-text);
  --color-text-darker: var(--coil-soft);
  --color-text-secondary: var(--coil-muted);
  --color-primary: var(--coil-accent);
  --color-primary-hover: var(--coil-violet);
  --color-primary-text: #2b2035;
  --color-primary-text-hover: #2b2035;
  --color-secondary: #153035;
  --color-secondary-hover: #21454b;
  --color-secondary-text: var(--coil-teal);
  --color-secondary-text-hover: #fff;
  --color-tertiary-text: var(--coil-soft);
  --color-tertiary-text-hover: #fff;
  --bg-image: none;
  min-width: 320px;
  margin: 0;
  padding: 102px 0 0;
  color: var(--coil-text);
  background:
    radial-gradient(circle at 12% 4%, rgba(124, 58, 237, .17), transparent 28rem),
    radial-gradient(circle at 90% 30%, rgba(56, 189, 248, .08), transparent 34rem),
    var(--coil-bg);
  font-family: var(--coil-body);
  font-size: 16px;
  line-height: 1.6;
  color-scheme: dark;
}

.coil-store *, .coil-store *::before, .coil-store *::after { box-sizing: border-box; }
.coil-store ::selection { color: #fff; background: rgba(168, 85, 247, .6); }
.coil-store a { color: var(--coil-violet); }
.coil-store a:hover { color: #fff; }
.coil-store :focus-visible { outline: 2px solid var(--coil-teal); outline-offset: 4px; }
.coil-store img { max-width: 100%; }
.coil-store button, .coil-store input, .coil-store select, .coil-store textarea { font: inherit; }
.coil-store button, .coil-store a { -webkit-tap-highlight-color: transparent; }
.coil-menu-toggle[hidden] { display: none !important; }
.coil-wrap { width: min(1220px, calc(100% - 48px)); margin-inline: auto; }

/* Shared community navigation, matching the main website. */
.coil-community-header {
  position: fixed;
  z-index: 80;
  inset: 0 0 auto;
  padding: 14px 0;
  background: linear-gradient(#292631, #29263100);
}
.coil-store.show-navigation .coil-community-header { visibility: hidden; }
.coil-nav-frame {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  padding: 8px 10px 8px 16px;
  border: 1px solid var(--coil-line);
  border-radius: 18px 22px 19px 24px;
  background: #35313ef5;
  box-shadow: 0 4px 0 #211e2980;
  backdrop-filter: blur(22px) saturate(140%);
}
.coil-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--coil-text) !important; text-decoration: none; }
.coil-brand img { width: 40px; height: 40px; object-fit: contain; }
.coil-brand > span { display: grid; font-family: var(--coil-display); font-size: 20px; font-weight: 900; line-height: 1.12; letter-spacing: -.04em; }
.coil-brand small { margin-top: 5px; color: var(--coil-muted); font-family: var(--coil-body); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.coil-community-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.coil-community-nav a { display: block; padding: 10px 11px; color: var(--coil-soft); border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 650; }
.coil-community-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.coil-community-nav .coil-current { background: rgba(168, 85, 247, .14); color: var(--coil-violet); }
.coil-nav-actions { display: flex; align-items: center; gap: 8px; }
.coil-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid var(--coil-line);
  border-radius: 13px;
  color: var(--coil-text) !important;
  background: rgba(255, 255, 255, .04);
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}
.coil-button-primary { border-color: rgba(216, 180, 254, .4); background: var(--coil-accent); box-shadow: 0 4px 0 #745589; }
.coil-button-primary:hover { filter: brightness(1.12); }
.coil-copy-ip { white-space: nowrap; min-width: 92px; }
.coil-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--coil-line); border-radius: 12px; background: rgba(255, 255, 255, .04); color: #fff; cursor: pointer; }

/* A compact store introduction keeps the catalog within easy reach. */
.coil-store-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  margin-top: 26px;
  margin-bottom: 30px;
  padding: 30px 34px;
  border: 1px solid rgba(192, 132, 252, .18);
  border-radius: 26px;
  background: linear-gradient(135deg, #3b3049, #35313e);
  box-shadow: 0 5px 0 #211e2980;
}
.coil-eyebrow { margin: 0 0 10px; color: var(--coil-violet); font-family: "Coil Hand", cursive; font-size: 20px; font-weight: 500; letter-spacing: 0; }
.coil-store-headline { max-width: 670px; margin: 0; color: var(--coil-text); font-family: var(--coil-display); font-size: clamp(1.8rem, 3.5vw, 2.85rem); font-weight: 900; line-height: 1.06; letter-spacing: -.055em; text-wrap: balance; }
.coil-store-summary { max-width: 640px; margin: 14px 0 0; color: var(--coil-soft); font-size: 16px; }
.coil-help-link { flex-shrink: 0; color: var(--coil-muted) !important; font-size: 14px; text-decoration: none; }
.coil-help-link span { display: block; color: var(--coil-teal); font-weight: 750; }

/* Native Exo store surfaces. These selectors change presentation only. */
.coil-store .site { min-height: auto; background: transparent; }
.coil-store :is(.site-header, .site-content, .site-home-categories, .site-footer-inner) { width: min(1220px, calc(100% - 48px)); max-width: 1220px; padding-inline: 0; margin-inline: auto; }
.coil-store .site-content { gap: 24px; }
.coil-store .site-header { color: var(--coil-text); background-color: transparent; }
.coil-store .site-header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; height: auto; min-height: 94px; padding: 12px 0 24px; }
.coil-store .site-header-inner .site-title { position: static; inset: auto; order: -1; flex: 1; margin: 0; width: auto; height: auto; text-align: left; font-family: var(--coil-display); font-size: 26px; line-height: 1.2; }
.coil-store .site-header-inner .site-title img { max-width: 200px; max-height: 54px; margin: 0; object-fit: contain; }
.coil-store .site-header-inner :is(.actions, .user-actions, .log-in) { position: static; margin: 0; }
.coil-store .site-header-inner .user-actions { gap: 10px; }
/* The community bar above already provides the server address and Discord. */
.coil-store .site-header-inner .info { display: none; }
.coil-store :is(.site-navigation, .site-sidebar, .store-navigation, .widget, .module) {
  border: 1px solid var(--coil-line);
  border-radius: var(--coil-radius);
  background: #35313e;
  color: var(--coil-soft);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .14);
}
.coil-store :is(.site-navigation, .store-navigation) a { color: var(--coil-soft); border-radius: 10px; font-size: 14px; }
.coil-store :is(.site-navigation, .store-navigation) a:hover,
.coil-store :is(.site-navigation, .store-navigation) .active > a { background-color: rgba(168, 85, 247, .13); color: var(--coil-violet); }
.coil-store :is(.widget, .module) h2,
.coil-store :is(.widget, .module) h3,
.coil-store :is(.widget-title, .module-header) { color: var(--coil-text); font-family: var(--coil-display); font-size: 20px; font-weight: 800; }
.coil-store :is(.store-category, .store-category-tiered, .store-product-full, .text-content, .store-text) { color: var(--coil-soft); }
.coil-store :is(.store-text, .category-description, .no-products, .store-category-tiered) { border: 1px solid var(--coil-line); border-radius: var(--coil-radius); background: var(--coil-panel); }
.coil-store :is(.store-category-header, .store-category-tiered-header, .store-page-header) { margin-bottom: 26px; }
.coil-store :is(.text-content, .store-category-header, .store-category-tiered-header, .store-page-header) :is(h1, h2, h3) {
  color: var(--coil-text);
  font-family: var(--coil-display);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.coil-store .text-content { font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.coil-store .text-content p { margin-block: 0 1em; }
.coil-store .text-content a { color: var(--coil-teal); text-underline-offset: 4px; }
.coil-store :is(.store-product, .store-product-tiered, .site-home-categories .category) {
  min-width: 0;
  border: 1px solid var(--coil-line);
  border-radius: var(--coil-radius);
  background: radial-gradient(circle at 100% 0%, rgba(168, 85, 247, .1), transparent 20rem), var(--coil-panel);
  color: var(--coil-soft);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .19);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.coil-store :is(.store-product, .store-product-tiered, .site-home-categories .category):hover { border-color: rgba(192, 132, 252, .42); box-shadow: 0 20px 58px rgba(0, 0, 0, .26); }
.coil-store :is(.product-title, .site-home-categories .category .title) { color: var(--coil-text); font-family: var(--coil-display); font-size: 23px; font-weight: 850; letter-spacing: -.035em; }
.coil-store :is(.store-product, .store-product-tiered) .product-title a { color: var(--coil-text); }
.coil-store :is(.store-product, .store-product-tiered) .price strong { color: var(--coil-teal); font-size: 20px; font-weight: 800; }
.coil-store :is(.store-product, .store-product-tiered) :is(del, s, .discount) { color: var(--coil-muted); }
.coil-store :is(.store-product, .store-product-tiered) .actions { gap: 10px; }
.coil-store :is(.btn-primary, .btn-secondary, .btn-tertiary, .btn, .button) {
  min-height: 44px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 900;
  text-shadow: none;
}
.coil-store :is(.btn-primary, .button-primary, .btn--primary) { border-color: rgba(216, 180, 254, .38); color: #fff; background: var(--coil-accent); box-shadow: 0 4px 0 #745589; }
.coil-store :is(.btn-primary, .button-primary, .btn--primary):hover { color: #fff; filter: brightness(1.1); }
.coil-store :is(.btn-secondary, .button-secondary, .btn--secondary) { color: var(--coil-teal); border-color: rgba(94, 234, 212, .3); background: rgba(94, 234, 212, .08); }
.coil-store :is(button:disabled, .btn.disabled, .button.disabled, .btn--disabled) { opacity: .55; cursor: not-allowed; filter: none; box-shadow: none; }
.coil-store :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=submit]), select, textarea) {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 12px;
  color: var(--coil-text);
  background-color: #302c39;
  font-size: 16px;
}
.coil-store :is(input, textarea)::placeholder { color: var(--coil-muted); opacity: 1; }
.coil-store label { color: var(--coil-soft); font-size: 14px; }
.coil-store input:is([type=checkbox], [type=radio]) { accent-color: var(--coil-accent); }
.coil-store .popup-content { border: 1px solid var(--coil-line); border-radius: 22px; color: var(--coil-soft); background-color: #35313e; box-shadow: 0 32px 110px rgba(0, 0, 0, .65); }
.coil-store .basket-popup-content { border-radius: 0; }
.coil-store .basket-item { border-radius: 14px; background: var(--coil-panel-raised); }
.coil-store :is(.modal-header, .modal-footer, .basket-header, .basket-footer) { border-color: var(--coil-line); }
.coil-store :is(.modal, .popup) :is(h1, h2, h3, h4, .close) { color: var(--coil-text); }
.coil-store :is(.alert, .notice) { border-radius: 14px; }
.coil-store :is(.alert-danger, .alert-error) { color: #fecdd3; background-color: #371624; border-color: #7d334c; }
.coil-store .alert-success { color: #a7f3d0; background-color: #102e29; border-color: #275e4e; }
.coil-store .alert-warning { color: #fde68a; background-color: #32290f; border-color: #66521b; }
.coil-store :is(.progress, .progress-bar-track) { border-radius: 999px; background-color: #45384f; }
.coil-store .progress-bar { background: linear-gradient(90deg, var(--coil-accent), var(--coil-teal)); }
.coil-store .site-footer { color: var(--coil-muted); background-color: transparent; border-color: var(--coil-line); }

/* Community footer is separate from Tebex's mandatory legal and payment footer. */
.coil-community-footer { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-top: 64px; margin-bottom: 24px; padding: 32px 0; border-top: 1px solid var(--coil-line); }
.coil-footer-brand p { max-width: 360px; margin: 16px 0 0; color: var(--coil-muted); font-size: 14px; }
.coil-footer-links { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 28px; }
.coil-footer-links a { color: var(--coil-soft); font-size: 14px; text-decoration: none; }
.coil-footer-links a:hover { color: var(--coil-teal); }

/* The same small, optional pointer glow as the main Coil website. */
.coil-cursor-glow { position: fixed; z-index: 2; top: 0; left: 0; width: 110px; height: 110px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle at center, rgba(216, 180, 254, .23), rgba(168, 85, 247, .12) 28%, rgba(56, 189, 248, .06) 50%, transparent 72%); filter: blur(5px); mix-blend-mode: screen; transform: translate3d(-500px, -500px, 0); transition: opacity 240ms ease; will-change: transform; }
.coil-cursor-glow.is-visible { opacity: 1; }
.coil-toast { position: fixed; z-index: 90; bottom: 24px; left: 50%; max-width: calc(100% - 32px); padding: 12px 18px; border: 1px solid rgba(94, 234, 212, .35); border-radius: 14px; background: #35483e; color: var(--coil-teal); box-shadow: 0 16px 50px rgba(0, 0, 0, .4); font-size: 14px; opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; }
.coil-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1050px) {
  .coil-nav-frame { flex-wrap: wrap; gap: 12px; }
  .coil-nav-actions { margin-left: auto; }
  .coil-community-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; padding: 8px; margin: 0; }
  .coil-menu-ready .coil-community-nav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 12px; border: 1px solid var(--coil-line); border-radius: 18px; background: #35313e; box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
  .coil-menu-ready .coil-community-nav.is-open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coil-menu-toggle { display: inline-flex; }
  html:not(.coil-menu-ready) .coil-community-header { position: static; }
  html:not(.coil-menu-ready) body.coil-store { padding-top: 0; }
}
@media (max-width: 760px) {
  .coil-store-banner { align-items: start; flex-direction: column; gap: 20px; padding: 26px; }
  .coil-help-link span { display: inline; margin-left: 5px; }
  .coil-community-footer { flex-direction: column; align-items: start; }
  .coil-store .site-content { gap: 18px; }
}
@media (max-width: 960px) {
  .coil-store .site-navigation { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
}
@media (max-width: 480px) {
  .coil-wrap, .coil-store :is(.site-header, .site-content, .site-home-categories, .site-footer-inner) { width: calc(100% - 24px); }
  .coil-store .store-products-images { grid-template-columns: minmax(0, 1fr); }
  .coil-nav-frame { padding-left: 10px; gap: 8px; }
  .coil-brand > span { font-size: 18px; }
  .coil-brand img { width: 34px; height: 34px; }
  .coil-brand small { font-size: 12px; }
  .coil-copy-ip { min-width: 72px; padding: 10px; }
  .coil-store-banner { padding: 24px 20px; }
  .coil-store-headline { font-size: 28px; }
  .coil-footer-links { grid-template-columns: 1fr; }
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .coil-cursor-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .coil-store *, .coil-store *::before, .coil-store *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Shared details from the Coil v7 website. */
.coil-button-primary, .coil-button-primary:hover { color: #2b2035 !important; }
.coil-store :is(.btn-primary, .button-primary, .btn--primary),
.coil-store :is(.btn-primary, .button-primary, .btn--primary):hover { color: #2b2035; }
.coil-banner-postcard { width: 240px; flex: 0 0 240px; margin: 0; padding: 7px; border: 1px solid #655970; border-radius: 7px; background: #45384f; box-shadow: 4px 5px 0 #211e2980; }
.coil-banner-postcard img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
.coil-banner-postcard figcaption { padding: 6px 5px 2px; color: #d5b8ef; font: 500 18px/1.4 "Coil Hand", cursive; }
.coil-help-link { display: inline-block; margin-top: 16px; }
.coil-help-link span { display: inline; margin-left: 5px; }
.coil-store :is(.btn-primary,.btn-secondary,.btn-tertiary,.coil-button) { border-radius: 12px 14px 12px 15px; }
.coil-store :is(.store-product,.store-product-tiered,.widget,.module,.store-text) { box-shadow: 0 5px 0 #211e2940; }
.coil-store .site-footer { font-family: var(--coil-body); }
.coil-community-nav { max-height: calc(100dvh - 105px); overflow-y: auto; }
@media (max-width: 760px) {
 .coil-store-banner { flex-direction: row; align-items: center; }
 .coil-banner-postcard { width: 180px; flex-basis: 180px; }
}
@media (max-width: 560px) {
 .coil-store-banner { flex-direction: column; align-items: stretch; }
 .coil-banner-postcard { display: none; }
 .coil-wrap, .coil-store :is(.site-header,.site-content,.site-home-categories,.site-footer-inner) { width: calc(100% - 32px); }
}

/* Native Exo header: keep account controls, remove the duplicate visible logo.
   The title stays available to screen readers. Community branding stays above. */
.coil-store .site-header-inner .site-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.coil-store .site-header-inner .user-actions,
.coil-store .site-header-inner .log-in { margin-left: auto; }

/* Exo icon-only controls contain an accessible text label underneath the icon.
   Keep that label visually hidden after the shared button typography rules. */
.coil-store :is(.btn-icon, .btn-glyph) {
  font-size: 0;
  line-height: 0;
  color: transparent;
  padding: 0;
}
.coil-store :is(.btn-icon, .btn-glyph):hover,
.coil-store :is(.btn-icon, .btn-glyph):focus-visible {
  font-size: 0;
  color: transparent;
}
@media (max-width: 960px) {
  .coil-store :is(.btn-icon-text, .btn-glyph-text) {
    justify-content: center;
    font-size: 0;
    color: transparent;
  }
  .coil-store :is(.btn-icon-text, .btn-glyph-text)::before { margin-right: 0; }
}