/* Local styles: no CDN, external fonts, or imported stylesheets. */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #0f141a;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
h1, p { margin: 0; }
main { flex: 1; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid rgb(255 255 255 / 5%);
  background: rgb(15 20 26 / 80%);
  backdrop-filter: blur(12px);
}
.header-inner {
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 16px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.025em; color: rgb(255 255 255 / 80%); }
.brand:hover { color: #fff; }
.brand-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background: #1a2332; border: 1px solid rgb(255 255 255 / 10%); font-size: 10px; font-weight: 700; color: #e8c84a; }
.header-caption { font-size: 12px; color: rgb(255 255 255 / 30%); }
.product-page {
  min-height: calc(100vh - 8rem);
  background: linear-gradient(to bottom, #0f141a, #141b24, #0f141a);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
}
.logo { margin-bottom: 32px; opacity: 0.7; }
.card-wrapper { position: relative; max-width: 100%; }
.card-glow { position: absolute; inset: -8px; border-radius: 12px; background: linear-gradient(to bottom, rgb(232 200 74 / 30%), rgb(212 148 42 / 20%), rgb(168 106 26 / 30%)); filter: blur(4px); }
.product-card { position: relative; width: 320px; max-width: 100%; padding: 8px; border-radius: 8px; border: 1px solid rgb(232 200 74 / 30%); background: linear-gradient(to bottom, #1e2a3a, #141b24); box-shadow: 0 25px 50px -12px rgb(232 200 74 / 5%); }
.rarity-strip { height: 4px; border-radius: 6px 6px 0 0; margin-bottom: 4px; background: linear-gradient(to right, #e8c84a, #f5d77a, #d4942a); }
.product-image { position: relative; min-height: 280px; padding: 16px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, #0a0e14, #111820); }
.product-image::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgb(232 200 74 / 8%), transparent 70%); }
.product-image img { position: relative; z-index: 1; filter: drop-shadow(0 0 30px rgb(232 200 74 / 30%)); transition: filter 500ms, transform 500ms; }
.product-image img:hover { filter: drop-shadow(0 0 40px rgb(232 200 74 / 50%)); transform: scale(1.05); }
.product-details { padding: 16px 12px; }
.product-details > * + * { margin-top: 12px; }
.product-heading { text-align: center; }
.product-heading h1 { font-size: 18px; line-height: 28px; font-weight: 700; color: #e8c84a; filter: drop-shadow(0 0 8px rgb(232 200 74 / 30%)); }
.product-heading p { margin-top: 2px; font-size: 12px; line-height: 16px; color: rgb(255 255 255 / 40%); }
.divider { border-top: 1px solid rgb(255 255 255 / 5%); }
.description { font-size: 12px; line-height: 1.625; color: rgb(255 255 255 / 50%); text-align: center; }
.stock-row { display: flex; justify-content: center; }
.stock-badge { display: flex; align-items: center; gap: 6px; background: #1a2332; border: 1px solid rgb(255 255 255 / 5%); border-radius: 4px; padding: 6px 12px; font-size: 12px; line-height: 16px; color: rgb(255 255 255 / 60%); }
.stock-badge svg { color: #e8c84a; flex-shrink: 0; }
.stock-badge strong { color: rgb(255 255 255 / 90%); font-weight: 600; }
.quality-badges { margin-top: 24px; display: flex; align-items: center; gap: 16px; font-size: 12px; line-height: 16px; color: rgb(255 255 255 / 30%); }
.quality-badges span { display: flex; align-items: center; gap: 4px; }
.quality-badges svg { color: rgb(232 200 74 / 50%); }
.purchase-buttons { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 100%; }
.recommended-button { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.recommendation { position: absolute; top: -8px; left: 50%; transform: translate(-50%, -100%); background: linear-gradient(to right, #e8c84a, #d4942a); color: #000; font-size: 10px; line-height: 15px; font-weight: 700; text-transform: uppercase; padding: 2px 8px; border-radius: 2px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%); white-space: nowrap; }
.buy-button { display: block; width: 100%; padding: 12px 32px; border-radius: 6px; background: linear-gradient(to bottom, #5ba32b, #3d7a1c); color: #fff; font-size: 14px; line-height: 20px; font-weight: 600; text-align: center; box-shadow: 0 0 12px rgb(93 163 43 / 30%); transition: box-shadow 200ms, background 200ms; }
.buy-button:hover { background: linear-gradient(to bottom, #6dc43a, #4a8e22); box-shadow: 0 0 20px rgb(93 163 43 / 50%); }
a:focus-visible { outline: 2px solid #e8c84a; outline-offset: 4px; }
.site-footer { border-top: 1px solid rgb(255 255 255 / 5%); background: #0f141a; }
.site-footer div { margin: 0 auto; padding: 16px; text-align: center; font-size: 12px; line-height: 16px; color: rgb(255 255 255 / 30%); }
@media (min-width: 640px) {
  .product-card { width: 360px; }
  .purchase-buttons { flex-direction: row; }
  .recommended-button, .buy-button { width: auto; }
  .header-inner { max-width: 640px; }
}
@media (min-width: 768px) { .header-inner { max-width: 768px; } }
@media (min-width: 1024px) { .header-inner { max-width: 1024px; } }
@media (min-width: 1280px) { .header-inner { max-width: 1280px; } }
@media (min-width: 1536px) { .header-inner { max-width: 1536px; } }