@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  /* Color */
  --bg: #0b1220;
  --surface: #131c2e;
  --surface-elevated: #1c2740;
  --border: #2a3654;
  --primary: #3b82f6;
  --primary-dark: #1d4ed8;
  --primary-light: #60a5fa;
  --accent: #10b981;
  --accent-dark: #047857;
  --accent-light: #34d399;
  --error: #ef4444;
  --warning: #f59e0b;
  --text-primary: #f8fafc;
  --text-secondary: #c3cde0;
  --text-muted: #8b96b3;

  /* Spacing (8px scale) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-12: 128px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);

  /* Shadow */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -8px rgba(0,0,0,0.5);
  --shadow-elevated: 0 4px 8px rgba(0,0,0,0.4), 0 16px 40px -12px rgba(0,0,0,0.6);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.375rem; }
p { margin: 0 0 var(--space-3); color: var(--text-secondary); }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--space-4); }
.site-header__brand { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
.site-nav { display: flex; gap: var(--space-5); }
.site-nav a { color: var(--text-secondary); font-weight: 500; }
.site-nav a:hover { color: var(--text-primary); }
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); }
.cart-badge { position: absolute; top: -6px; right: -6px; background: var(--accent); color: #04120c; font-size: 11px; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px; display: grid; place-items: center; }
.nav-toggle { display: none; }

.layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-6); padding-top: var(--space-6); }
.layout > main { min-width: 0; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
.sidebar-module { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }
.sidebar-module__title { font-size: 1rem; margin-bottom: var(--space-3); }
.server-status { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.sidebar-module__stat { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); font-size: 0.875rem; margin-bottom: var(--space-3); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-dot--online { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.top-donator { display: flex; align-items: center; gap: var(--space-3); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-elevated); }
.goal-bar { height: 8px; border-radius: 999px; background: var(--surface-elevated); overflow: hidden; margin: var(--space-2) 0; }
.goal-bar__fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .6s ease; }
.text-muted { color: var(--text-muted); }

.site-footer { border-top: 1px solid var(--border); margin-top: var(--space-8); padding: var(--space-6) 0 var(--space-4); }
.site-footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.site-footer__links { display: flex; gap: var(--space-4); }
.site-footer__legal { text-align: center; font-size: 0.8125rem; padding-top: var(--space-4); }

.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--primary); color: #fff; }
.btn--commerce { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #04120c; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn--ghost { background: transparent; border-color: var(--border); color: var(--text-primary); }
.btn--sm { padding: 8px 14px; font-size: 0.875rem; }

/* display:block matters here, not just cosmetic: .card is also used on the
   <a> in package-card.twig, and an anchor's default display:inline makes it
   an unreliable containing block for the absolutely-positioned discount
   ribbon inside it (observed live: the ribbon rendered off the left edge of
   the card, as if the card's width were 0, only for the <a>-based card). */
.card { position: relative; display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); box-shadow: var(--shadow-elevated); }

a:focus-visible, button:focus-visible { outline: 2px solid var(--primary-light); outline-offset: 2px; }

@media (max-width: 860px) {
  .site-nav { position: fixed; inset: 72px 0 auto 0; background: var(--bg); border-bottom: 1px solid var(--border); flex-direction: column; padding: var(--space-4); transform: translateY(calc(-100% - 72px)); transition: transform .25s ease; }
  .site-nav.is-open { transform: translateY(0); }
  .nav-toggle { display: grid; }
}
.hero { position: relative; padding: var(--space-8) 0 var(--space-6); overflow: hidden; text-align: center; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 480px; background: radial-gradient(60% 60% at 30% 30%, color-mix(in srgb, var(--primary) 35%, transparent), transparent 70%), radial-gradient(50% 50% at 75% 40%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%); filter: blur(40px); z-index: -1; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: var(--space-4); }
.hero__actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-5); }

.stat-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-7); }
.stat { text-align: center; }
.stat__value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--text-primary); }
.stat__label { color: var(--text-muted); font-size: 0.875rem; }

.section { padding: var(--space-8) 0; }
.section__head { text-align: center; max-width: 640px; margin: 0 auto var(--space-6); }

.tier-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.category-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.category-tile { padding: var(--space-4); text-align: center; }
.category-tile__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary) 18%, var(--surface-elevated)); display: grid; place-items: center; margin: 0 auto var(--space-3); }

.cta-banner { text-align: center; padding: var(--space-7) var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, var(--surface)), color-mix(in srgb, var(--accent) 15%, var(--surface))); border: 1px solid var(--border); }

.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.pricing-card { padding: var(--space-5); text-align: center; position: relative; display: flex; flex-direction: column; min-width: 0; }
.pricing-card--featured { border-color: var(--accent); transform: scale(1.04); }
.pricing-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #04120c; font-size: 0.75rem; font-weight: 700; padding: 4px 14px; border-radius: 999px; }
.pricing-card__media { width: 64px; height: 64px; margin: 0 auto var(--space-3); border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.pricing-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pricing-card__price { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; margin: var(--space-3) 0; }
.pricing-card__price .price-suffix { font-size: 1rem; color: var(--text-muted); font-family: var(--font-sans); font-weight: 400; }
.pricing-card__price .price-original-charge { font-size: 0.8125rem; }
.pricing-card__features { list-style: none; padding: 0; margin: var(--space-4) 0; text-align: left; display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.pricing-card__features li { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--text-secondary); }
.pricing-card__features .icon { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

@media (max-width: 860px) {
  .stat-bar, .category-tiles { grid-template-columns: repeat(2, 1fr); }
  .tier-strip { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .pricing-card--featured { transform: none; }
}

.compare-toggle-wrap { text-align: center; margin-top: var(--space-6); }
.compare-toggle-wrap .icon { transition: transform .2s ease; }
#compare-toggle.is-open .icon { transform: rotate(180deg); }

.compare-table-wrap { margin-top: var(--space-5); overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--surface); }
.compare-table th, .compare-table td { padding: var(--space-3); text-align: center; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
.compare-table thead th { background: var(--surface-elevated); vertical-align: top; padding-top: var(--space-4); }
.compare-table thead th a { display: block; }
.compare-table thead th strong { font-family: var(--font-display); font-size: 1rem; }
.compare-table tbody th.compare-table__icon { font-size: 1.25rem; text-align: left; background: var(--surface-elevated); width: 1%; white-space: nowrap; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table td.compare-table__absent { color: var(--text-muted); }
.compare-table tbody td:not(.compare-table__absent) { color: var(--text-primary); }

@media (max-width: 640px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.product-card__media { aspect-ratio: 16/10; background: var(--surface-elevated); border-radius: var(--radius-md) var(--radius-md) 0 0; overflow: hidden; }
.product-card__body { padding: var(--space-4); }
.product-card__row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: var(--space-3); }
.product-card__price { font-family: var(--font-display); font-weight: 700; color: var(--accent-light); font-size: 1.125rem; }

/* DKK price conversion (assets/main.js): a non-bold "≈" in the same green as
   the price, then the bold DKK amount, with the real Tebex-charged price
   kept below as a small, clearly-labelled note, since the store's real
   prices are in USD/EUR and the DKK figure is only an approximate
   conversion, never the actual amount charged. */
.price-dkk { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.price-dkk-approx { font-weight: 400; color: var(--text-muted); }
.price-dkk-amount { font-weight: 700; color: var(--accent-light); }
.price-dkk-was { font-weight: 400; color: var(--text-muted); }
.price-original { display: block; font-family: var(--font-sans); font-weight: 400; color: var(--text-muted); margin-top: 4px; }
.price-original-charge { display: block; font-size: 0.75rem; }
.price-original-disclaimer { display: block; font-size: 0.6875rem; margin-top: 1px; opacity: 0.8; }

/* Discount corner ribbon: replaces inline "-X% rabat" text next to a price
   (see 6b in README) so the discount reads as a badge on the box, not
   crowded into the price line itself. Anchor element needs position:relative
   (.card and .product-detail__gallery already have it). */
.discount-ribbon { position: absolute; top: 0; right: 0; z-index: 1; background: var(--error); color: #fff; font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 0 var(--radius-md) 0 var(--radius-sm); }
/* The "Mest Populær" badge floats centered above the card border (see
   .pricing-card__badge's negative top), so on that one card a plain top:0
   ribbon collides with it at normal card widths. Push the ribbon down to
   clear the badge's own footprint instead. */
.discount-ribbon--below-badge { top: 22px; }
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; } }

.product-detail { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); align-items: start; }
.product-detail__gallery { position: relative; aspect-ratio: 4/3; background: var(--surface-elevated); border-radius: var(--radius-lg); overflow: hidden; }
.product-detail__price { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--accent-light); margin: var(--space-3) 0; }
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; } }

.product-card__media img, .product-detail__gallery img { width: 100%; height: 100%; object-fit: cover; }

:root {
  --tebex-legal-footer-background-color: var(--surface);
  --tebex-legal-footer-text-color: var(--text-muted);
  --tebex-legal-footer-border-color: var(--border);
  --tebex-legal-footer-logo-color: var(--text-secondary);
}

.site-sale-banner { margin: 0; text-align: center; padding: var(--space-2) var(--space-4); background: linear-gradient(90deg, var(--primary-dark), var(--accent-dark)); color: #fff; font-size: 0.875rem; font-weight: 600; }

.server-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 0.875rem; cursor: pointer; }
.server-pill:hover { color: var(--text-primary); }
.server-pill.is-copied::after { content: "✓"; color: var(--accent); margin-left: var(--space-1); }

.site-nav a.is-active { color: var(--accent-light); }

.site-footer__copyright { text-align: center; font-size: 0.8125rem; margin: var(--space-4) 0 0; }

.countdown-badge { display: inline-block; margin-left: var(--space-2); padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--error) 20%, var(--surface)); color: var(--error); font-size: 0.75rem; font-weight: 700; vertical-align: middle; }

.product-detail__thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.product-detail__thumbs button { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border); padding: 0; background: var(--surface-elevated); cursor: pointer; }
.product-detail__thumbs button.is-active { border-color: var(--accent); }
.product-detail__thumbs img, .product-detail__thumbs iframe { width: 100%; height: 100%; object-fit: cover; }

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.quantity-field { display: flex; align-items: center; gap: var(--space-2); }
.gift-note { font-size: 0.75rem; color: var(--text-muted); margin-top: var(--space-2); }

.text-content { line-height: 1.7; }
.text-content p { margin: 0 0 var(--space-3); }
.text-content ul, .text-content ol { margin: 0 0 var(--space-3); padding-left: 1.25em; color: var(--text-secondary); }
.text-content a { color: var(--primary-light); text-decoration: underline; }
.text-content strong { color: var(--text-primary); }
.text-content img { border-radius: var(--radius-sm); margin: var(--space-3) 0; }

.toast { position: fixed; top: 88px; left: 50%; transform: translateX(-50%); z-index: 50; max-width: 90vw; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-elevated); border: 1px solid var(--border); color: var(--text-primary); box-shadow: var(--shadow-elevated); font-size: 0.9375rem; animation: toast-in .25s ease; }
.toast--success { border-color: var(--accent); }
.toast--error { border-color: var(--error); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.site-nav__subnav { display: flex; flex-direction: column; }
.site-nav__subnav a { padding-left: var(--space-3); font-size: 0.875rem; color: var(--text-muted); }
@media (min-width: 861px) { .site-nav__subnav { display: none; } }

.gift-form { display: none; margin-top: var(--space-3); padding: var(--space-3); background: var(--surface-elevated); border-radius: var(--radius-sm); }
.gift-form.is-open { display: block; }