:root {
  --ink: #0e0d0b;
  --ink-2: #17150f;
  --ink-3: #221f17;
  --paper: #ece3cd;
  --paper-dim: #a79d86;
  --brass: #c8a45a;
  --brass-dim: #7d6739;
  --weapon: #d4873a;
  --vitality: #6fa845;
  --spirit: #a472dc;
  --display: 'Forum', 'Times New Roman', serif;
  --ui: 'Oswald', 'Arial Narrow', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 300 16px/1.5 var(--ui);
  letter-spacing: 0.01em;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(200,164,90,.10), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  min-height: 100vh;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ── Hero ── */
.hero { position: relative; text-align: center; padding: 56px 16px 28px; overflow: hidden; }
.sunburst { position: absolute; left: 50%; top: -20px; width: min(900px, 160vw); transform: translateX(-50%); color: var(--brass); opacity: .16; pointer-events: none; }
.hero-inner { position: relative; max-width: 640px; margin: 0 auto; }
.eyebrow { display: flex; justify-content: center; gap: 14px; margin: 0 0 8px; font-weight: 400; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--brass); }
.dia { font-size: 9px; line-height: 20px; }
h1 { font: 400 clamp(56px, 13vw, 112px)/.9 var(--display); letter-spacing: .06em; text-transform: uppercase; margin: 0; color: var(--paper); text-shadow: 0 0 40px rgba(200,164,90,.25); }
.tagline { margin: 16px auto 0; max-width: 440px; color: var(--paper-dim); font-size: 17px; }
.deco-rule { display: flex; align-items: center; gap: 12px; max-width: 320px; margin: 24px auto 0; color: var(--brass); }
.deco-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-dim)); }
.deco-rule i:last-child { transform: scaleX(-1); }
.deco-rule b { font-size: 10px; font-weight: 400; }

/* ── Tabs ── */
.tabs { position: sticky; top: 0; z-index: 5; display: flex; justify-content: center; gap: 4px; padding: 10px 16px; background: rgba(14,13,11,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ink-3); }
.tab { --c: var(--brass); flex: 0 1 160px; padding: 10px 8px 8px; border: 1px solid var(--ink-3); border-bottom: 3px solid transparent; background: var(--ink-2); font-weight: 500; font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); transition: color .15s, border-color .15s, background .15s; }
.tab.weapon { --c: var(--weapon); } .tab.vitality { --c: var(--vitality); } .tab.spirit { --c: var(--spirit); }
.tab:hover { color: var(--paper); }
.tab[aria-selected="true"] { color: var(--c); border-bottom-color: var(--c); background: linear-gradient(0deg, color-mix(in srgb, var(--c) 18%, transparent), transparent); }

/* ── Shop grid ── */
.shop { max-width: 1080px; margin: 0 auto; padding: 8px 16px 140px; }
.tier { margin-top: 32px; }
.tier-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.tier-head h2 { margin: 0; font: 400 26px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.tier-head .souls { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); white-space: nowrap; }
.tier-head .line { flex: 1; height: 1px; background: var(--ink-3); align-self: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.card { --c: var(--weapon); position: relative; display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--ink-3); padding: 14px 12px 12px; transition: border-color .15s, transform .15s; }
.card.vitality { --c: var(--vitality); } .card.spirit { --c: var(--spirit); }
.card:hover { border-color: color-mix(in srgb, var(--c) 55%, var(--ink-3)); transform: translateY(-2px); }
.card::before, .card::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1px solid var(--brass-dim); }
.card::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.card::after { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

/* Сам брелок: квадратна пластина з ілюстрацією, вушко з отвором і кільце */
.fob { position: relative; width: 80%; aspect-ratio: 1; margin: 22px auto 12px; }
.fob .art { position: relative; display: block; width: 100%; height: 100%; border-radius: 12%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.12), 0 10px 20px rgba(0,0,0,.5); }
.fob .loop { position: absolute; top: -12%; left: 50%; width: 26%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50% 50% 18% 18%; background: radial-gradient(circle at 50% 42%, var(--ink-2) 0 27%, var(--c) 29%); }
.fob .ring { position: absolute; top: -30%; left: 50%; width: 28%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 3px solid #b9b3a4; border-bottom-color: #6d685d; }
.fob .art { z-index: 1; }

.card h3 { margin: 0; font: 500 15px/1.2 var(--ui); letter-spacing: .04em; text-transform: uppercase; min-height: 2.4em; }
.card .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.card .price { font-weight: 400; color: var(--paper-dim); }
.add { width: 36px; height: 36px; border: 1px solid var(--c); background: transparent; color: var(--c); font-size: 20px; line-height: 1; transition: background .15s, color .15s; }
.add:hover { background: var(--c); color: var(--ink); }
.add.in { background: var(--c); color: var(--ink); font-size: 14px; font-weight: 600; }

/* ── Cart bar & drawer ── */
.cart-bar { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 10; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 20px; border: 1px solid var(--brass); background: var(--ink-2); box-shadow: 0 10px 30px rgba(0,0,0,.6); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.cart-bar[hidden] { display: none; }
.cart-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; background: var(--brass); color: var(--ink); font-weight: 600; letter-spacing: 0; }
.cart-total { color: var(--brass); }
.cart-bar.bump { animation: bump .3s; }
@keyframes bump { 50% { transform: translateX(-50%) scale(1.06); } }

.drawer { position: fixed; inset: 0; z-index: 20; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); overflow-y: auto; background: var(--ink-2); border-left: 1px solid var(--brass-dim); padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { margin: 0; font: 400 32px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.icon-btn { width: 40px; height: 40px; border: 1px solid var(--ink-3); background: none; }

.lines { list-style: none; margin: 16px 0; padding: 0; }
.line-item { --c: var(--weapon); display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ink-3); }
.line-item.vitality { --c: var(--vitality); } .line-item.spirit { --c: var(--spirit); }
.line-item .mini { width: 44px; height: 44px; border-radius: 8px; }
.line-item .nm { font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
.line-item .sub { color: var(--paper-dim); font-size: 13px; }
.qty { display: flex; align-items: center; border: 1px solid var(--ink-3); }
.qty button { width: 32px; height: 32px; border: 0; background: none; }
.qty span { min-width: 22px; text-align: center; }

.checkout h3 { margin: 20px 0 12px; font: 500 13px/1 var(--ui); letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.checkout label { display: block; margin-bottom: 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); }
.checkout input, .checkout textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--ink-3); border-radius: 0; background: var(--ink); color: var(--paper); font: 400 16px/1.3 var(--ui); letter-spacing: .02em; text-transform: none; }
.checkout input:focus, .checkout textarea:focus { border-color: var(--brass); outline: none; }
.checkout .invalid { border-color: #c4563f; }
.row { display: grid; grid-template-columns: 1fr 130px; gap: 10px; }
.form-error { color: #e07a5f; margin: 0 0 12px; }
.pay { display: flex; justify-content: space-between; width: 100%; padding: 15px 18px; border: 0; background: var(--brass); color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }
.pay:hover { filter: brightness(1.08); }
.pay:disabled { opacity: .6; cursor: wait; }
.pay-note { margin: 10px 0 0; font-size: 13px; color: var(--paper-dim); text-align: center; }
.empty { color: var(--paper-dim); padding: 24px 0; text-align: center; }

.test-banner { background: repeating-linear-gradient(-45deg, #3a2a10, #3a2a10 10px, #2a1f0c 10px, #2a1f0c 20px); color: var(--brass); text-align: center; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 16px; }

/* ── Footer ── */
.foot { max-width: 560px; margin: 0 auto; padding: 0 16px 120px; text-align: center; color: var(--paper-dim); font-size: 14px; }
.foot .fine { font-size: 12px; opacity: .7; }

/* ── Thanks page ── */
.thanks { max-width: 480px; margin: 0 auto; padding: 80px 16px; text-align: center; }
.thanks h1 { font-size: clamp(44px, 12vw, 72px); }
.thanks .status { margin: 24px 0; padding: 16px; border: 1px solid var(--brass-dim); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.thanks a { color: var(--brass); }

@media (max-width: 520px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tab { font-size: 13px; letter-spacing: .12em; padding: 9px 4px 7px; }
  .card h3 { font-size: 13px; }
  .tier-head h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }