/* Blocky Stores default theme. Accent colour and background come from the store's theme (theme.css.twig). */
:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --line: #2a2f3a;
  --text: #e8eaef;
  --muted: #9aa1ad;
  --accent: #f5a31a;
  --ok: #2fbf71;
  --err: #e5484d;
  --wait: #e0a42b;
  --radius: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
code { background: var(--panel-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; font-size: .92em; }
h1 { font-size: 1.7rem; margin: .2em 0 .6em; }
h2 { font-size: 1.2rem; margin: 1.4em 0 .7em; }
h3 { font-size: 1rem; margin: 0 0 .6em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .88rem; margin: .2em 0; }

.top { background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.brand { color: var(--text); font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; }
.brand img { display: block; height: 40px; width: auto; }
.nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.head { border-radius: 4px; image-rendering: pixelated; vertical-align: middle; }
.head.big { border-radius: 8px; }
.badge { background: var(--accent); color: #111; border-radius: 999px; padding: 0 7px; font-size: .78rem; font-weight: 700; }

.notice { background: #3a2d10; color: #ffd47a; padding: 8px 16px; border-radius: 0 0 8px 8px; }
main.wrap { padding-top: 24px; padding-bottom: 40px; min-height: 60vh; }

.hero { padding: 28px 0 8px; }
.hero h1 { font-size: 2.1rem; margin: 0; }
.hero p { color: var(--muted); margin: .4em 0 0; }

.layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; margin-top: 18px; }
.content { min-width: 0; }
.side .card + .card { margin-top: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card + .card { margin-top: 16px; }
.narrow { max-width: 620px; margin: 0 auto; }

.cats { list-style: none; margin: 0; padding: 0; }
.cats a { display: block; padding: 7px 10px; border-radius: 7px; color: var(--text); }
.cats a:hover, .cats a.active { background: var(--panel-2); text-decoration: none; color: var(--accent); }
.top-list { margin: 0; padding-left: 20px; }
.top-list li { margin: 4px 0; }
progress.meter { width: 100%; height: 10px; appearance: none; border: 0; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
progress.meter::-webkit-progress-bar { background: var(--panel-2); border-radius: 999px; }
progress.meter::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress.meter::-moz-progress-bar { background: var(--accent); border-radius: 999px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.pkg { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.pkg-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--panel-2); }
.pkg-media img { width: 100%; height: 100%; object-fit: contain; }
.pkg-media.big { border-radius: var(--radius); max-width: 320px; }
.pkg-placeholder { font-size: 3rem; font-weight: 800; color: var(--accent); opacity: .8; }
.pkg-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pkg-body h3 a { color: var(--text); }
.pkg-body form { margin-top: auto; }
.price { font-weight: 700; color: var(--accent); margin: 0; }
.price.big { font-size: 1.5rem; }
.price .muted { font-weight: 400; font-size: .85rem; margin-left: 4px; }
.pkg-detail { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 24px; margin-bottom: 18px; }
.cat-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.cat-tile:hover { border-color: var(--accent); text-decoration: none; }
.cat-badge { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 5px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; vertical-align: 2px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--text); }

.btn { display: inline-block; background: var(--accent); color: #111; border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 700; cursor: pointer; font: inherit; font-weight: 700; text-align: center; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.big { padding: 12px 20px; width: 100%; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.link-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; padding: 0; }
.link-btn:hover { color: var(--err); }
input[type=text], input[type=number], input[type=email], select { width: 100%; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font: inherit; }
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .9rem; }
label.radio, label.check { flex-direction: row; align-items: flex-start; gap: 10px; color: var(--text); font-size: .95rem; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.code-input { font-size: 1.4rem !important; letter-spacing: .15em; text-transform: uppercase; text-align: center; }

.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 16px; border: 1px solid; }
.flash.ok { background: rgba(47, 191, 113, .1); border-color: rgba(47, 191, 113, .4); }
.flash.err { background: rgba(229, 72, 77, .1); border-color: rgba(229, 72, 77, .4); }
.flash.wait { background: rgba(224, 164, 43, .1); border-color: rgba(224, 164, 43, .4); }

.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
table.lines { width: 100%; border-collapse: collapse; }
table.lines th, table.lines td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.lines th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.codes { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; margin-top: 16px; }
.support { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--line); }
.support.is-on { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.support-face { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-weight: 800; font-size: 20px; }
.support-face img { width: 100%; height: 100%; image-rendering: pixelated; }
.support-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.support-text small { color: var(--muted); }
.support-form { display: flex; gap: 8px; }
.support-form input { width: 160px; text-transform: uppercase; }
dl.totals { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0 0 16px; }
dl.totals dt { color: var(--muted); }
dl.totals dd { margin: 0; text-align: right; }
dl.totals .grand { font-weight: 800; font-size: 1.15rem; color: var(--text); padding-top: 8px; border-top: 1px solid var(--line); }
.status { padding: 2px 8px; border-radius: 999px; font-size: .8rem; background: var(--panel-2); }
.s-paid { color: var(--ok); }
.s-review, .s-pending { color: var(--wait); }
.s-refunded, .s-charged_back, .s-canceled { color: var(--err); }
.account-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.account-head h1 { margin: 0; }
.account-head form { margin-left: auto; }
ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.steps { padding-left: 20px; }
.steps li { margin: 6px 0; }
.prose p:first-child { margin-top: 0; }

.powered { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); margin-top: 6px; opacity: .8; }
.powered:hover { opacity: 1; text-decoration: none; }
.powered img { height: 18px; width: auto; display: block; }
.home-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 8px; }
.home-modules .card + .card { margin-top: 0; }
.module h3 { margin-bottom: 10px; }
.maintenance { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 90vh; text-align: center; }
.foot { color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); padding-top: 18px; padding-bottom: 30px; }

@media (max-width: 860px) {
  .layout, .cart-layout, .pkg-detail { grid-template-columns: 1fr; }
  .side { order: 2; }
  .codes { grid-template-columns: 1fr; }
  .support { flex-wrap: wrap; }
  .support-form { width: 100%; }
  .support-form input { flex: 1; width: auto; }
  .hero h1 { font-size: 1.6rem; }
  table.lines th:nth-child(2), table.lines td:nth-child(2) { display: none; }
}

/* legal pages (Terms, Privacy, Impressum) and the footer links to them */
.foot .legal { color: var(--muted); font-size: 13px; margin: 4px 0; }
.foot .legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.prose h2 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
.prose ul { padding-left: 20px; }
.prose li { margin: 4px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.prose th { background: rgba(255, 255, 255, .04); }
.check a { text-decoration: underline; }

/* sign in with the in-game name */
.name-form .name-input { font-size: 18px; padding: 14px 16px; letter-spacing: .01em; }
.inline-form { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
.inline-form .code-input { flex: 1 1 200px; }

/* upsells in the cart */
.upsells { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.upsells h3 { margin: 0 0 12px; font-size: 1rem; }
.upsell-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.upsell { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.upsell img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; }
.upsell-name { font-weight: 600; }
.upsell-price { font-size: 14px; }
.upsell form { margin-top: auto; }
.btn.small { padding: 6px 12px; font-size: 13px; width: 100%; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: #111; vertical-align: middle; }

/* offers after payment */
.offers { margin-top: 24px; }
.offer-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.offer { display: flex; gap: 14px; align-items: flex-start; }
.offer img { width: 88px; height: 88px; object-fit: contain; border-radius: 10px; flex: none; }
.offer h3 { margin: 0 0 6px; }
.offer-price { margin: 8px 0; }

/* quantity selector */
.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.qty input { width: 56px; text-align: center; border: 0; background: transparent; color: inherit; font-weight: 700; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { width: 36px; border: 0; background: var(--panel-2); color: var(--text); font-size: 18px; cursor: pointer; }
.qty-btn:disabled { opacity: .4; cursor: default; }
.ribbon { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; background: var(--accent); color: #111; margin-bottom: 6px; }

/* rank table */
.rank-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.rank-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.rank-table th, .rank-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.rank-table tbody th { text-align: left; font-weight: 600; color: var(--muted); }
.rank-table thead th { vertical-align: bottom; }
.rank-table thead img { display: block; width: 72px; height: 72px; object-fit: contain; margin: 0 auto 8px; }
.rank-name { display: block; font-weight: 800; font-size: 1.05rem; color: var(--text); }
.rank-price { font-size: 14px; margin-top: 4px; }
.rank-ribbon { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--accent); color: #111; margin-bottom: 6px; }
.rank-yes { color: var(--ok); font-weight: 900; font-size: 18px; }
.rank-no { color: var(--muted); opacity: .6; }
.rank-value { font-weight: 700; }
.rank-table tfoot td { border-bottom: 0; }

/* patrons */
.patron-tier { margin-bottom: 18px; }
.patron-tier-head { display: flex; align-items: baseline; justify-content: space-between; border-left: 4px solid; padding-left: 12px; margin-bottom: 14px; }
.patron-tier-head h2 { margin: 0; }
.patron-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.patron { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; word-break: break-all; text-align: center; }

/* payment method logos */
.pay-logos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pay-logos img { display: block; border-radius: 5px; }
.pay-option { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-option .pay-logos { margin-left: auto; }

/* cart lines with the package picture */
.cart-item { display: flex; align-items: center; gap: 12px; }
.cart-thumb { width: 48px; height: 48px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); overflow: hidden; }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-thumb span { font-weight: 800; color: var(--accent); }
label.check > span { flex: 1; min-width: 0; }

/* ---------- checkout: the order on the left, the steps on the right (cart and order pages) ---------- */
.co { --co-text: #1d2230; --co-muted: #6b7280; --co-line: #e6e8ec; --co-side: #f6f7f9; --co-accent: var(--accent, #f5a31a); --co-dark: #1d2230;
  display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-areas: "side main" "foot foot"; max-width: 1000px; margin: 8px auto 28px;
  background: #fff; color: var(--co-text); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .12);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-shadow: none; letter-spacing: normal; text-transform: none; }
.co a { color: inherit; }
.co-side { grid-area: side; display: flex; flex-direction: column; gap: 18px; padding: 22px; background: var(--co-side); border-right: 1px solid var(--co-line); }
.co-main { grid-area: main; padding: 22px 30px 30px; min-width: 0; }
.co-foot { grid-area: foot; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--co-line); font-size: 12.5px; color: var(--co-muted); }
.co-foot p { flex: 1; min-width: 220px; margin: 0; }
.co-foot nav { display: flex; gap: 14px; flex-wrap: wrap; }
.co-foot nav a { text-decoration: underline; }
.co-lock svg { width: 16px; height: 16px; color: #16a34a; display: block; }

.co-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.co-side-head a { text-decoration: underline; color: var(--co-muted); white-space: nowrap; }
.co-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.co-who img { border-radius: 6px; image-rendering: pixelated; }
.co-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.co-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.co-items li { display: flex; align-items: flex-start; gap: 12px; }
.co-thumb { flex: none; width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--co-line); display: grid; place-items: center; overflow: hidden; font-weight: 700; color: var(--co-accent); }
.co-thumb img { width: 100%; height: 100%; object-fit: contain; }
.co-thumb-lg { width: 52px; height: 52px; }
.co-item-main { flex: 1; min-width: 0; }
.co-item-name { font-weight: 600; }
.co-item-price { font-size: 13.5px; color: var(--co-muted); }
.co-item-price s { color: #dc2626; margin-right: 4px; }
.co-item-sub { font-size: 12.5px; color: var(--co-muted); }
.co-tag { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px; background: #fef3c7; color: #92400e; vertical-align: 1px; }
.co-x { width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--co-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.co-x:hover { background: #e9ebef; color: var(--co-text); }

.co-codes { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 6px; }
.co-field { display: flex; flex-direction: column; gap: 6px; }
.co-label { font-size: 13px; font-weight: 700; }
.co-inline { display: flex; gap: 6px; }
.co input[type=text], .co input[type=email] { flex: 1 1 auto; min-width: 0; width: 100%; height: 40px; padding: 0 12px; border: 1px solid #d5d8de; border-radius: 8px; background: #fff;
  color: var(--co-text); font: 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; box-shadow: none; text-transform: none; }
.co input[type=text]:focus, .co input[type=email]:focus { outline: 0; border-color: var(--co-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--co-accent) 22%, transparent); }
.co input::placeholder { color: #9ca3af; }
.co-support { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--co-line); border-radius: 10px; background: #fff; }
.co-support img, .co-support > span { width: 32px; height: 32px; border-radius: 7px; image-rendering: pixelated; display: grid; place-items: center; background: #fef3c7; font-weight: 700; }
.co-support div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.co-support small { color: var(--co-muted); font-size: 12px; }
.co-link { border: 0; background: none; padding: 0; color: var(--co-muted); text-decoration: underline; font: inherit; font-size: 13px; cursor: pointer; }

.co-totals { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--co-line); font-size: 14px; }
.co-totals > div { display: flex; justify-content: space-between; gap: 12px; }
.co-save span:last-child { color: #16a34a; font-weight: 600; }
.co-grand { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--co-line); font-size: 20px; font-weight: 800; }
.co-note { margin: 0; font-size: 12.5px; color: var(--co-muted); }

.co-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 26px; padding: 0; font-size: 14px; color: #9ca3af; }
.co-steps li { display: flex; align-items: center; gap: 10px; }
.co-steps li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid #c4c8cf; border-right: 1.5px solid #c4c8cf; transform: rotate(45deg); }
.co-steps .on { color: var(--co-accent); font-weight: 700; }
.co-steps .done { color: var(--co-text); }
.co-steps a { text-decoration: none; }
.co-steps a:hover { text-decoration: underline; }
.co-title { font-size: 19px; font-weight: 800; margin: 0 0 14px; color: var(--co-text); }
.co-text { margin: -6px 0 16px; color: var(--co-muted); }
.co-error { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 13px 16px; border-radius: 10px; background: #fef2f2;
  border: 1px solid #fca5a5; border-left: 5px solid #dc2626; color: #991b1b; font-size: 15px; font-weight: 700; line-height: 1.4; }
.co-error svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: #dc2626; }

.co-upsells { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.co-upsell { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--co-line); border-radius: 12px; background: #fafbfc; transition: border-color .15s; }
.co-upsell:hover { border-color: #cfd3da; }

.co-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--co-accent); color: #fff; font: 700 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-decoration: none; text-shadow: none; text-transform: none;
  box-shadow: none; transition: filter .15s, transform .1s; white-space: nowrap; }
.co-btn:hover { filter: brightness(.94); text-decoration: none; }
.co-btn:active { transform: translateY(1px); }
.co-btn-soft { background: #e9ebef; color: var(--co-text); }
.co-btn-dark { background: var(--co-dark); min-width: 76px; }
.co-btn-big { height: 50px; padding: 0 26px; font-size: 16px; border-radius: 10px; }

/* the store's label style (stacked, muted) does not apply inside the checkout */
.co label { color: var(--co-text); font-size: 14px; }
.co label.co-terms { flex-direction: row; color: var(--co-muted); font-size: 13px; }
.co label.co-email .co-label { color: var(--co-text); }
.co-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.co label.co-method { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 18px 12px 14px;
  text-align: center; border: 1.5px solid var(--co-line); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.co label.co-method:hover { border-color: #c9cdd4; }
.co label.co-method:has(input:checked) { border-color: var(--co-accent); background: color-mix(in srgb, var(--co-accent) 6%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--co-accent) 16%, transparent); }
.co-method input { position: absolute; opacity: 0; pointer-events: none; }
/* a small check in the corner of the chosen tile */
.co-method::after { content: ""; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #d5d8de; background: #fff; }
.co-method:has(input:checked)::after { border-color: var(--co-accent); background: var(--co-accent) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path d="M8.2 13.6 4.9 10.3l1.2-1.2 2.1 2.1 5.7-5.7 1.2 1.2z"/></svg>') center / 14px no-repeat; }
.co-method:has(input:focus-visible) { outline: 2px solid var(--co-accent); outline-offset: 2px; }
.co-method-mark { height: 40px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; color: var(--co-muted); margin-bottom: 4px; }
.co-method-mark img { border-radius: 4px; border: 1px solid var(--co-line); }
.co-method-mark .co-method-big { border-radius: 6px; }
.co-method-mark svg { width: 30px; height: 30px; }
.co-method-name { font-weight: 700; font-size: 14.5px; }
.co-method-caption { font-size: 12.5px; color: var(--co-muted); line-height: 1.35; }
.co-method-fee { margin-top: 4px; font-size: 11.5px; font-weight: 600; color: #92400e; background: #fef3c7; border-radius: 5px; padding: 1px 6px; }
.co-email { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.co-terms { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; font-size: 13px; color: var(--co-muted); cursor: pointer; }
.co-terms input { accent-color: var(--co-accent); width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.co-terms a { text-decoration: underline; color: var(--co-text); }
.co-pay .co-btn-big { width: 100%; }
.co-for { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: var(--co-muted); }
.co-for img { border-radius: 4px; image-rendering: pixelated; }
.co-for a { text-decoration: underline; }
.co .name-form { display: flex; flex-direction: row; gap: 8px; max-width: 460px; }
.co .name-form .btn { flex: none; width: auto; height: 44px; padding: 0 20px; border: 0; border-radius: 8px; background: var(--co-accent); color: #fff; box-shadow: none; text-shadow: none; text-transform: none; font: 700 15px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.co .name-form input { height: 44px; }
/* the floating cart button is not needed on the checkout itself */
body:has(.co) .ab-float-cart { display: none; }
.co .hint { color: var(--co-muted); font-size: 13px; }

.co-state { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; }
.co-state svg { width: 28px; height: 28px; }
.co-state-ok { background: #dcfce7; color: #16a34a; }
.co-state-wait { background: #fef3c7; color: #b45309; }
.co-state-err { background: #fee2e2; color: #dc2626; }
.co-spin { width: 24px; height: 24px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: co-spin .8s linear infinite; }
@keyframes co-spin { to { transform: rotate(360deg); } }
.co-instructions { margin: 0 0 18px; padding: 14px 16px; border-radius: 10px; background: var(--co-side); border: 1px solid var(--co-line); }
.co-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.co code { background: #f1f2f4; border: 1px solid var(--co-line); color: var(--co-text); }

.co-empty { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 460px; padding: 44px 30px; }
.co-empty p { margin: 0 0 20px; color: var(--co-muted); }
.co-empty .co-title { margin-bottom: 6px; }
.co-empty-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--co-side); color: var(--co-muted); margin-bottom: 16px; }
.co-empty-icon svg { width: 30px; height: 30px; }

@media (max-width: 820px) {
  .co { grid-template-columns: 1fr; grid-template-areas: "main" "side" "foot"; border-radius: 14px; }
  .co-side { border-right: 0; border-top: 1px solid var(--co-line); }
  .co-main { padding: 20px; }
  .co .name-form { flex-direction: column; }
}

/* ---------- tier slider (category shown as "Tier slider"): no JavaScript, radios pick the panel ---------- */
.tiers { display: grid; gap: 22px; }
.tier-group { --tier-accent: var(--accent); position: relative; padding: 24px 28px 26px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); text-align: center; }
.tier-title { margin: 0 0 18px; font-size: 22px; }
.tier-radio { position: absolute; opacity: 0; pointer-events: none; }
.tier-panel { display: none; }
.tier-radio:nth-of-type(1):checked ~ .tier-panel:nth-of-type(1),
.tier-radio:nth-of-type(2):checked ~ .tier-panel:nth-of-type(2),
.tier-radio:nth-of-type(3):checked ~ .tier-panel:nth-of-type(3),
.tier-radio:nth-of-type(4):checked ~ .tier-panel:nth-of-type(4),
.tier-radio:nth-of-type(5):checked ~ .tier-panel:nth-of-type(5),
.tier-radio:nth-of-type(6):checked ~ .tier-panel:nth-of-type(6),
.tier-radio:nth-of-type(7):checked ~ .tier-panel:nth-of-type(7),
.tier-radio:nth-of-type(8):checked ~ .tier-panel:nth-of-type(8),
.tier-radio:nth-of-type(9):checked ~ .tier-panel:nth-of-type(9),
.tier-radio:nth-of-type(10):checked ~ .tier-panel:nth-of-type(10),
.tier-radio:nth-of-type(11):checked ~ .tier-panel:nth-of-type(11),
.tier-radio:nth-of-type(12):checked ~ .tier-panel:nth-of-type(12) { display: block; }
.tier-track { position: relative; height: 6px; margin: 12px 24px 48px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 30%, transparent); }
.tier-track::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill); border-radius: inherit; background: var(--tier-accent); }
.tier-dot { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 45%, var(--panel)); cursor: pointer; transition: transform .15s; }
.tier-dot:hover { transform: scale(1.15); }
.tier-dot.on { background: var(--tier-accent); }
.tier-dot.current { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tier-accent) 25%, transparent); }
.tier-dot span { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--muted); }
.tier-dot.on span { color: var(--tier-accent); }
.tier-stage { display: flex; align-items: center; justify-content: center; gap: 40px; }
.tier-step { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 140px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer; user-select: none; transition: border-color .15s, transform .1s; }
.tier-step:hover { border-color: var(--tier-accent); }
.tier-step:active { transform: translateY(1px); }
.tier-step strong { text-transform: uppercase; }
.tier-step small { color: var(--muted); }
.tier-step.is-off { visibility: hidden; }
.tier-art { position: relative; flex: none; width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); }
.tier-art img { width: 72%; height: 72%; object-fit: contain; }
.tier-letter { font-size: 34px; font-weight: 800; color: var(--muted); }
.tier-badge { position: absolute; top: -4px; right: -22px; padding: 6px 12px; border-radius: 99px; background: var(--tier-accent); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.tier-name { margin-top: 22px; font-size: 22px; font-weight: 800; }
.tier-price { margin: 4px 0 16px; font-size: 17px; font-weight: 700; color: var(--muted); }
.tier-price s { color: var(--err); margin-right: 6px; }
.tier-buy { display: inline-flex; align-items: center; justify-content: center; width: min(360px, 100%); height: 48px; border: 0; border-radius: 10px; background: var(--tier-accent); color: #fff; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; text-decoration: none; }
.tier-buy:hover { filter: brightness(.95); text-decoration: none; }
.tier-more { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .tier-group { padding: 20px 14px; }
  .tier-track { margin: 12px 14px 46px; }
  .tier-dot span { font-size: 11px; }
  .tier-stage { gap: 10px; }
  .tier-step { min-width: 0; padding: 10px; }
  .tier-art { width: 120px; height: 120px; }
}

/* Remove on a store page: the package is already in the cart (it can be bought once) */
.is-remove { background: #ef4f63 !important; border-color: #b8233a !important; color: #fff !important; text-shadow: none !important; }

/* free gifts in the checkout: how much is missing for each */
.co-gifts { list-style: none; margin: 0; padding: 14px; display: flex; flex-direction: column; gap: 12px; border-radius: 12px; color: #fff;
  background: linear-gradient(120deg, color-mix(in srgb, var(--co-accent) 92%, #000), color-mix(in srgb, var(--co-accent) 70%, #7c3aed)); }
.co-gifts li { display: flex; align-items: center; gap: 12px; }
.co-gift-art { flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 22px; overflow: hidden; }
.co-gift-art img { width: 80%; height: 80%; object-fit: contain; }
.co-gift-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.35; }
.co-gift-bar { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.co-gift-bar i { display: block; height: 100%; border-radius: inherit; background: #fff; }
.co-gifts li.is-reached .co-gift-art { background: #fff; }

/* ---------- bonus card (package set to "Bonus card") ---------- */
.bonus-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 22px 22px; text-align: center;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.bonus-ribbon { position: absolute; top: 16px; right: -6px; z-index: 2; padding: 6px 12px; border-radius: 6px; background: #ffcb47; color: #6b3e00;
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; box-shadow: 0 4px 10px rgba(0, 0, 0, .2); }
.bonus-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 170px; overflow: visible; text-decoration: none; }
.bonus-art img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform .2s; }
.bonus-card:hover .bonus-art img { transform: scale(1.05) rotate(-2deg); }
.bonus-letter { font-size: 64px; font-weight: 800; color: var(--muted); }
.bonus-pill { margin-top: 6px; padding: 4px 10px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; }
.bonus-name { margin: 2px 0 0; font-size: 24px; line-height: 1.1; }
.bonus-name a { color: inherit; text-decoration: none; }
.bonus-compare { margin-top: -4px; color: var(--muted); font-weight: 700; }
.bonus-card form { width: 100%; }
.bonus-buy { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 8px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; text-decoration: none; transition: filter .15s, transform .1s; }
.bonus-buy:hover { filter: brightness(.95); text-decoration: none; }
.bonus-buy:active { transform: translateY(1px); }
.bonus-buy s { opacity: .7; font-weight: 600; }
.bonus-cart { width: 18px; height: 18px; background: currentColor; flex: none;
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49A1 1 0 0 0 20 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>') center / contain no-repeat; }

/* gift fields: the recipient's head next to the name, a note when it is the buyer */
.gift-who { display: flex; align-items: center; gap: 10px; width: 100%; }
.gift-who > input { flex: 1; min-width: 0; }
.gift-head { flex: none; width: 36px; height: 36px; border-radius: 7px; image-rendering: pixelated; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); animation: gift-in .2s ease; }
.gift-head[hidden] { display: none; }
@keyframes gift-in { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
.gift-who.is-mine > input { border-color: #e5484d !important; }
.gift-msg { display: block; margin-top: 4px; color: #e5484d; font-weight: 700; font-size: 13px; }
.gift-msg:empty { display: none; }
/* order page: what was delivered, where and when */
.co-deliv { margin: 4px 0 20px; border: 1px solid var(--co-line); border-radius: 12px; overflow: hidden; }
.co-deliv-head { padding: 10px 14px; background: var(--co-side); border-bottom: 1px solid var(--co-line); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--co-muted); }
.co-deliv ul { list-style: none; margin: 0; padding: 0; }
.co-deliv li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--co-line); }
.co-deliv li:last-child { border-bottom: 0; }
.co-deliv-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #d1d5db; }
.co-deliv .is-delivered .co-deliv-dot { background: #16a34a; }
.co-deliv .is-join .co-deliv-dot { background: #f59e0b; }
.co-deliv-what { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.co-deliv-what b { font-size: 14px; color: var(--co-text); }
.co-deliv-what small { font-size: 12.5px; color: var(--co-muted); }
.co-deliv-state { font-size: 13px; color: var(--co-muted); text-align: right; }
.co-deliv .is-delivered .co-deliv-state { color: #15803d; }
.co-deliv .is-join .co-deliv-state { color: #b45309; font-weight: 600; }
.co-deliv-help { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--co-side); border-top: 1px solid var(--co-line); }
.co-deliv-help form { margin: 0; }
.co-deliv-note { margin: 0; font-size: 13px; color: var(--co-muted); }
.co-report summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--co-text); }
.co-report form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.co-report textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--co-line); border-radius: 8px; background: #fff; color: var(--co-text); font: 14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; resize: vertical; }
.co-report textarea:focus { outline: 0; border-color: var(--co-accent); }
.co-report .co-btn { align-self: flex-start; }
@media (max-width: 560px) { .co-deliv li { flex-wrap: wrap; } .co-deliv-state { width: 100%; text-align: left; padding-left: 22px; } }

/* regional pricing: the approximate price in the visitor's own currency */
.price-approx { display: block; margin-top: 2px; font-size: .78em; font-weight: 400; opacity: .7; }

/* account: the player's own subscriptions */
.sub-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid rgba(127, 127, 127, .2); }
.sub-row:last-of-type { border-bottom: 0; }
.sub-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-actions form { margin: 0; }
.sub-switch { display: flex; gap: 6px; }
.sub-warn { color: #e5484d; font-weight: 600; }

/* store builder: blocks of the home page (Design > Store builder); colours come from --bb-* set on .bb */
.bb { --bb-accent: var(--accent, #f5a31a); --bb-surface: rgba(127, 127, 127, .12); --bb-radius: 12px; display: flex; flex-direction: column; gap: 28px; margin: 18px 0 40px; color: var(--bb-text, inherit); }
.bb-font-nunito { font-family: "Nunito", system-ui, sans-serif; }
.bb-font-barlow { font-family: "Barlow", system-ui, sans-serif; }
.bb-font-system { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.bb-section h2 { margin: 0 0 12px; }
.bb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bb-head a { color: var(--bb-accent); font-weight: 700; }
.bb-hero { border-radius: var(--bb-radius); background-color: #1d2230; background-size: cover; background-position: center; overflow: hidden; }
.bb-hero.has-image .bb-hero-in { background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .25)); }
.bb-hero-in { padding: clamp(28px, 6vw, 64px); }
.bb-align-center .bb-hero-in { text-align: center; }
.bb .bb-hero h1 { margin: 0 0 10px; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.1; color: #fff !important; }
.bb .bb-hero p { margin: 0 0 22px; max-width: 640px; font-size: 1.08rem; opacity: .9; color: #fff !important; }
.bb-align-center .bb-hero p { margin-left: auto; margin-right: auto; }
.bb-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border: 0; border-radius: var(--bb-radius); background: var(--bb-accent); color: #111; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; }
.bb-btn:hover { filter: brightness(1.08); text-decoration: none; }
.bb-card { padding: 22px; border-radius: var(--bb-radius); background: var(--bb-surface); }
.bb-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.bb-cta h2 { margin-bottom: 4px; }
.bb-cta p { margin: 0; }
.bb-cats { display: grid; gap: 12px; }
.bb-cats-tiles { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.bb-cats-list { grid-template-columns: 1fr; }
.bb-cat { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--bb-radius); background: var(--bb-surface); color: var(--bb-text, inherit); }
.bb-cat:hover { outline: 2px solid var(--bb-accent); text-decoration: none; }
.bb-cat span { font-size: .9rem; opacity: .7; }
.bb-goal { height: 12px; border-radius: 999px; background: rgba(127, 127, 127, .25); overflow: hidden; margin: 6px 0 8px; }
.bb-goal span { display: block; height: 100%; background: var(--bb-accent); }
.bb-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bb-people li { display: flex; align-items: center; gap: 10px; }
.bb-people img { border-radius: 6px; }
.bb-people b { margin-right: auto; }
.bb-banner { display: block; border-radius: var(--bb-radius); overflow: hidden; }
.bb-banner img { display: block; width: 100%; height: auto; }

/* currency selector */
.cur { position: relative; }
.cur summary { list-style: none; cursor: pointer; font-weight: 600; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); }
.cur summary::-webkit-details-marker { display: none; }
.cur summary::after { content: ''; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.cur-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.cur-menu a { display: block; color: var(--text); padding: 7px 10px; border-radius: 8px; font-size: .9rem; white-space: nowrap; opacity: .85; }
.cur-menu a:hover, .cur-menu a[aria-current] { opacity: 1; background: var(--panel-2); }
.cur-menu b { display: inline-block; width: 42px; }