/* Hades RP store. Colours and shapes come from the logo: night black, bone-white steel,
   electric blue; slanted plates and cut corners.

   Loaded after Exo's own stylesheets (see head.twig), so everything here restyles Exo's markup.
   Classes starting with hx- are ours (index.html); the rest are Exo's. */

:root {
  --hx-bg: #05070b;
  --hx-panel: #0b1018;
  --hx-card: #0f1622;
  --hx-line: #1d2a3d;
  --hx-text: #e9eff8;
  --hx-dim: #8794a8;
  --hx-bone: #cdd5df;
  --hx-volt: #2b8cff;
  --hx-volt-hi: #8fd6ff;
  --hx-volt-soft: rgba(43, 140, 255, 0.14);
  --hx-volt-glow: rgba(43, 140, 255, 0.55);
  --hx-ink: #03101f;
  --hx-display: "Teko", "Arial Narrow", Impact, sans-serif;
  --hx-ui: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --hx-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --hx-cut: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* ------------------------------------------------------------------ home */
.hx-home { grid-column: 1 / -1; width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 48px; color: var(--hx-text); font: 15px/1.55 var(--hx-body); padding-block: 24px 48px; }
.hx-home * { box-sizing: border-box; }
.hx-home p { margin: 0; }

.hx-label, .hx-chips span, .hx-cat span { font: 700 11px var(--hx-ui); text-transform: uppercase; letter-spacing: 0.14em; }
.hx-label { color: var(--hx-volt-hi); }

.hx-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 24px; align-items: center; padding: 34px; overflow: hidden; border: 1px solid var(--hx-line); background: linear-gradient(110deg, rgba(43, 140, 255, 0.10), transparent 55%), var(--hx-panel); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px)); }
.hx-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(-45deg, var(--hx-volt) 0 14px, transparent 14px 28px); }
.hx-title { margin: 0; font: italic 700 clamp(54px, 9vw, 112px)/0.95 var(--hx-display); text-transform: uppercase; color: var(--hx-text); }
.hx-title em { font-style: inherit; color: var(--hx-volt); text-shadow: 0 0 26px var(--hx-volt-glow); }
.hx-lead { max-width: 48ch; color: var(--hx-bone); font-size: 17px; margin-top: 10px; }
.hx-cta { display: flex; gap: 18px 22px; flex-wrap: wrap; margin-top: 26px; padding-left: 6px; }
.hx-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 24px; text-decoration: none; font: 700 14px var(--hx-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hx-ink); background: linear-gradient(180deg, var(--hx-volt-hi), var(--hx-volt)); transform: skewX(-12deg); box-shadow: 0 0 22px var(--hx-volt-glow); }
.hx-btn > span { display: block; transform: skewX(12deg); }
.hx-btn:hover { filter: brightness(1.12); }
.hx-btn:focus-visible { outline: 2px solid var(--hx-text); outline-offset: 3px; }
.hx-btn-discord { background: #5865f2; color: #fff; box-shadow: none; }
.hx-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.hx-chips span { border: 1px solid var(--hx-line); background: var(--hx-bg); padding: 5px 10px; color: var(--hx-bone); }
.hx-skull { position: relative; display: grid; place-items: center; min-height: 300px; }
.hx-skull canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-skull img { position: relative; height: min(340px, 60vw); width: auto; max-width: 100%; filter: drop-shadow(0 0 34px var(--hx-volt-glow)); }

.hx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; counter-reset: hx; }
.hx-steps li { counter-increment: hx; position: relative; background: var(--hx-card); border: 1px solid var(--hx-line); border-left: 4px solid var(--hx-volt); padding: 18px 18px 18px 78px; clip-path: var(--hx-cut); }
.hx-steps li::before { content: "0" counter(hx); position: absolute; left: 16px; top: 8px; font: italic 700 54px/1 var(--hx-display); color: var(--hx-volt); text-shadow: 0 0 18px var(--hx-volt-glow); }
.hx-steps b { display: block; font: 600 24px/1 var(--hx-display); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px; }
.hx-steps span { color: var(--hx-dim); font-size: 14px; }
.hx-steps kbd { font: 700 12px var(--hx-ui); border: 1px solid var(--hx-volt); color: var(--hx-volt-hi); padding: 0 6px; }

.hx-heading { margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--hx-line); font: italic 700 52px/0.95 var(--hx-display); text-transform: uppercase; color: var(--hx-text); }
.hx-heading::before { content: "//"; color: var(--hx-volt); margin-right: 10px; }
.hx-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.hx-cat { position: relative; display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; min-height: 150px; padding: 18px; text-decoration: none; color: var(--hx-text); background: linear-gradient(180deg, rgba(43, 140, 255, 0.10), transparent 55%), var(--hx-card); border: 1px solid var(--hx-line); clip-path: var(--hx-cut); transition: border-color 0.15s, transform 0.15s; }
.hx-cat:hover { border-color: var(--hx-volt); transform: translateY(-3px); }
.hx-cat img { position: absolute; right: 12px; top: 12px; height: 72px; width: auto; }
.hx-cat b { font: italic 700 40px/0.95 var(--hx-display); text-transform: uppercase; }
.hx-cat span { color: var(--hx-volt-hi); }

.hx-text { color: var(--hx-bone); }

.hx-promise { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; border-block: 1px solid var(--hx-line); padding-block: 26px; }
.hx-promise b { display: block; font: 600 28px/1 var(--hx-display); text-transform: uppercase; color: var(--hx-volt-hi); margin-bottom: 4px; }
.hx-promise p { color: var(--hx-dim); }

@media (max-width: 780px) {
  .hx-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .hx-skull { order: -1; min-height: 220px; }
  .hx-heading { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-cat { transition: none; }
}

/* ==================================================================
   Exo's own markup, restyled. "html body" in front keeps these rules
   ahead of Exo's stylesheets whatever their own selectors are.
   ================================================================== */

:root {
  /* Exo's colour settings (Appearance > template settings can still override them). */
  --color-primary: #2b8cff;
  --color-primary-hover: #8fd6ff;
  --color-primary-text: #03101f;
  --color-primary-text-hover: #03101f;
  --color-sale-banner-bg: #ff4d5e;
  --color-sale-banner-text: #ffffff;
}

html body {
  color: var(--hx-text);
  font-family: var(--hx-body);
  background:
    radial-gradient(900px 480px at 50% -80px, rgba(43, 140, 255, 0.22), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
    var(--hx-bg);
  background-attachment: fixed;
}
html body h1, html body h2, html body h3, html body h4 { font-family: var(--hx-display); text-transform: uppercase; letter-spacing: 0.01em; }
html body a { color: var(--hx-volt-hi); }

/* ------------------------------------------------------------------ buttons */
html body .btn-primary, html body .btn-secondary, html body .btn-tertiary {
  font-family: var(--hx-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  border-radius: 0; text-decoration: none;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
html body .btn-primary { background: linear-gradient(180deg, var(--hx-volt-hi), var(--hx-volt)); color: var(--hx-ink); border-color: transparent; }
html body .btn-primary:hover { filter: brightness(1.12); color: var(--hx-ink); }
html body .btn-secondary, html body .btn-tertiary { background: var(--hx-panel); color: var(--hx-text); border: 1px solid var(--hx-line); }
html body .btn-secondary:hover, html body .btn-tertiary:hover { border-color: var(--hx-volt); color: var(--hx-volt-hi); }
html body [disabled].btn-primary, html body [disabled].btn-secondary { filter: grayscale(1); opacity: 0.5; }

/* ------------------------------------------------------------------ header */
html body .site-header { background: transparent; border-bottom: 1px solid var(--hx-line); }
html body .site-title { margin: 0; font: 700 34px/0.9 var(--hx-display); letter-spacing: 0.06em; }
html body .site-title a { color: var(--hx-text); text-decoration: none; }
html body .site-title img { max-height: 150px; width: auto; filter: drop-shadow(0 0 22px var(--hx-volt-glow)); }
html body .site-header .info { background: var(--hx-panel); border: 1px solid var(--hx-line); border-radius: 0; clip-path: var(--hx-cut); color: var(--hx-text); text-decoration: none; }
html body .site-header .info:hover { border-color: var(--hx-volt); }
html body .site-header .info .title { font: 600 22px/1 var(--hx-display); text-transform: uppercase; letter-spacing: 0.03em; color: var(--hx-text); }
html body .site-header .info .action { font: 700 11px var(--hx-ui); text-transform: uppercase; letter-spacing: 0.14em; color: var(--hx-volt-hi); background: none; border: 0; }
html body .site-sale-banner { margin: 0; font: 700 13px var(--hx-ui); text-transform: uppercase; letter-spacing: 0.14em; text-align: center; padding: 8px 16px; background: repeating-linear-gradient(-45deg, #ff4d5e 0 18px, #e23f50 18px 36px); color: #fff; }

/* The category menu (navigation.twig). */
html body .site-header nav, html body .store-sidebar nav { background: transparent; }
html body .site-header nav a, html body .store-sidebar nav a { font: 600 13px var(--hx-ui); text-transform: uppercase; letter-spacing: 0.12em; color: var(--hx-dim); text-decoration: none; }
html body .site-header nav a:hover, html body .store-sidebar nav a:hover,
html body .site-header nav .active > a, html body .site-header nav a.active { color: var(--hx-volt-hi); }

/* ------------------------------------------------------------------ category page: package cards */
html body .category-description { color: var(--hx-bone); border-left: 4px solid var(--hx-volt); padding-left: 14px; }
html body .no-products { color: var(--hx-dim); }
html body .store-products-grid { gap: 16px; }
html body .store-product {
  background: linear-gradient(180deg, rgba(43, 140, 255, 0.08), transparent 45%), var(--hx-card);
  border: 1px solid var(--hx-line); border-radius: 0; clip-path: var(--hx-cut);
  transition: border-color 0.15s;
}
html body .store-product:hover { border-color: var(--hx-volt); }
html body .store-product .image { border-radius: 0; }
html body .store-product .image-default { background: radial-gradient(circle at 50% 55%, rgba(43, 140, 255, 0.30), transparent 62%), var(--hx-panel); }
html body .store-product .product-title { font: italic 700 34px/0.95 var(--hx-display); text-transform: uppercase; }
html body .store-product .product-title a { color: var(--hx-text); text-decoration: none; }
html body .store-product .product-title a:hover { color: var(--hx-volt-hi); }
html body .store-product .countdown { font: 700 11px var(--hx-ui); text-transform: uppercase; letter-spacing: 0.12em; background: #ff4d5e; color: #fff; padding: 2px 8px; border-radius: 0; }
html body .product-actions .price { font: 600 30px/1 var(--hx-display); color: var(--hx-text); font-variant-numeric: tabular-nums; }
html body .product-actions .price .discount { font-size: 18px; color: var(--hx-dim); }
html body .quantity-field { border: 1px solid var(--hx-line); background: var(--hx-panel); border-radius: 0; }
html body .quantity-field .quantity { background: transparent; color: var(--hx-text); border: 0; }
html body .quantity-field .open-basket { font: 700 12px var(--hx-ui); text-transform: uppercase; letter-spacing: 0.1em; color: var(--hx-volt-hi); background: none; border: 0; }

/* ------------------------------------------------------------------ package page */
html body .store-product-full { clip-path: none; }
html body .store-product-full .product-title { font-size: clamp(40px, 6vw, 64px); }
html body .text-content { color: var(--hx-bone); line-height: 1.6; }
html body .text-content h1, html body .text-content h2, html body .text-content h3 { color: var(--hx-text); font-style: italic; }
html body .text-content ul { padding-left: 0; list-style: none; }
html body .text-content ul li { position: relative; padding-left: 20px; margin-block: 6px; }
html body .text-content ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; background: var(--hx-volt); transform: skewX(-12deg); }

/* ------------------------------------------------------------------ sidebar modules and footer */
html body .store-sidebar { color: var(--hx-bone); }
html body .store-sidebar h2, html body .store-sidebar h3 { font: italic 700 28px/1 var(--hx-display); color: var(--hx-text); }
html body .site-footer { border-top: 1px solid var(--hx-line); background: transparent; color: var(--hx-dim); }
html body .site-footer .copyright { font-size: 13px; }
html body .site-footer .we-accept img { filter: grayscale(1) brightness(1.6); opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  html body .store-product { transition: none; }
}

/* ------------------------------------------------------------------ first preview fixes */
/* The theme's starfield picture is replaced by our own night background. */
:root { --bg-image: none; }
html body .site, html body .site::before, html body .site::after,
html body .site-header, html body .site-header::before, html body .site-header::after { background-image: none !important; }

/* A slim header: the big artwork belongs to the home page hero, not above it. */
html body .site-header-inner { padding-block: 14px !important; min-height: 0 !important; }
html body .site-title { padding: 0 !important; }
html body .site-title img { max-height: 76px; }
html body .page-index .site-content { padding-top: 0; }
.hx-home { padding-top: 20px; }

/* ------------------------------------------------------------------ our header (header.twig) */
.hx-strip { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; padding: 9px 20px; border-bottom: 1px solid var(--hx-line); color: var(--hx-dim); font: 700 11px var(--hx-ui); text-transform: uppercase; letter-spacing: 0.14em; }
.hx-strip-space { flex: 1; }
.hx-live { display: inline-flex; align-items: center; gap: 8px; color: var(--hx-text); }
.hx-live[hidden] { display: none; }
.hx-live i { width: 8px; height: 8px; border-radius: 50%; background: #3be07f; box-shadow: 0 0 10px #3be07f; }
html body .hx-strip-link { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--hx-volt-hi); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
html body .hx-strip-link:hover { color: var(--hx-text); }

html body .hx-bar { display: flex !important; align-items: center; gap: 12px 26px; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; padding: 12px 20px !important; }
html body .hx-bar .site-title { order: 0; flex: none; }
html body .hx-bar .site-title a { display: flex; align-items: center; gap: 12px; }
html body .hx-bar .site-title img { max-height: 62px; }
.hx-brand { display: block; }
.hx-brand b { display: block; font: 700 30px/0.9 var(--hx-display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--hx-text); }
.hx-brand small { display: block; font: 700 11px var(--hx-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hx-volt-hi); }

html body .hx-nav { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
html body .hx-nav a { padding: 8px 16px; background: var(--hx-panel); border: 1px solid var(--hx-line); transform: skewX(-12deg); color: var(--hx-dim); font: 600 13px var(--hx-ui); text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none; }
html body .hx-nav a > b { display: block; transform: skewX(12deg); font-weight: inherit; }
html body .hx-nav a:hover { color: var(--hx-volt-hi); border-color: var(--hx-volt); }
html body .hx-nav a.hx-on { color: var(--hx-ink); background: var(--hx-volt); border-color: var(--hx-volt); box-shadow: 0 0 18px var(--hx-volt-glow); }

html body .hx-bar .user-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
html body .hx-bar .log-in { margin-left: auto; }

/* Desktop: our menu. Phones: the template's own menu behind its toggle button. */
html body .hx-header .actions { display: none; }
html body .hx-exo-nav { display: none; }
@media (max-width: 900px) {
  html body .hx-nav { display: none; }
  html body .hx-header .actions { display: block; }
  html body .hx-exo-nav { display: block; }
  .hx-brand b { font-size: 24px; }
}

/* ------------------------------------------------------------------ header: one row */
/* The default template places the logo, menu and login with its own ordering and spacing.
   Everything is reset so the bar reads left to right: logo, menu, login / basket. */
html body .site-header { border-bottom: 0; }
html body .hx-bar { height: auto !important; min-height: 0 !important; flex-wrap: nowrap; border-bottom: 1px solid var(--hx-line); }
html body .hx-bar > * { position: static !important; inset: auto !important; margin: 0 !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; grid-area: auto !important; transform: none !important; flex: none !important; }
html body .hx-bar > .site-title { order: 1 !important; }
html body .hx-bar > .hx-nav { order: 2 !important; flex: 1 1 auto !important; }
html body .hx-bar > .user-actions, html body .hx-bar > .log-in { order: 3 !important; margin-left: auto !important; }
html body .hx-bar > .log-in { padding: 10px 22px !important; }
html body .hx-bar > .actions { order: 0 !important; }
@media (max-width: 900px) {
  html body .hx-bar { flex-wrap: wrap; }
}