@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  opacity: 0;
  animation: fadeIn 0.45s ease forwards;
  animation-delay: var(--card-delay, 0s);
}

.gradient-title {
  background: linear-gradient(120deg, #38bdf8 0%, #facc15 50%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.book-spine {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  border-left: 4px solid #d69e2e;
}

@keyframes highlight {
  0% {
    box-shadow: 0 0 0 0 #facc15;
  }
  40% {
    box-shadow: 0 0 0 8px #facc15;
  }
  100% {
    box-shadow: 0 0 0 0 #facc15;
  }
}

.animate-highlight {
  animation: highlight 1.2s ease;
}

.js-like-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
}

input.no-spinner[type="number"]::-webkit-outer-spin-button,
input.no-spinner[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input.no-spinner[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Line clamp utilities */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.availability-indicator {
  color: transparent;
}

.availability-indicator svg {
  stroke: currentColor;
}

.peer:checked ~ .availability-indicator {
  color: var(--color-slate-900);
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"] {
  cursor: pointer;
}

@keyframes cartPulse {
  0% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(250, 204, 21, 0); }
  100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); }
}

@keyframes cartPulseRed {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.65); }
  70% { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

.cart-active {
  border-width: 1px;
  border-style: solid;
  border-color: rgba(250, 204, 21, 0.9) !important;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.45);
  animation: cartPulse 1.4s ease-out infinite;
}

/* Metal Gear theme overrides */
html.mg-theme {
  background-color: #040a07;
}

body.mg-theme {
  background: radial-gradient(circle at 15% 10%, rgba(64, 155, 92, 0.18), transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(42, 93, 62, 0.2), transparent 45%),
    linear-gradient(180deg, rgba(4, 10, 7, 0.96) 0%, rgba(4, 7, 6, 0.98) 100%);
  color: #dbe7d9;
}

body.mg-theme .gradient-title {
  background: linear-gradient(120deg, #7df2a3 0%, #c9f8d7 45%, #5bd28f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.font-share-tech-mono {
  font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@font-face {
  font-family: "Share Tech Mono";
  src: url("/static/fonts/share-tech-mono.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.breadcrumb {
  font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
}

.mg-panel {
  position: relative;
  border: 1px solid #2c4733;
  background: rgba(8, 14, 10, 0.92);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(5, 12, 8, 0.65);
}

.mg-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(125, 242, 163, 0.08), transparent 45%);
  pointer-events: none;
}

.mg-hero {
  padding: 28px 28px 30px;
  overflow: hidden;
}

.mg-kicker {
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #7df2a3;
}

.mg-title {
  color: #e6f7ea;
}

body.mg-theme .bg-gradient-to-br.from-slate-800.via-slate-900.to-slate-800 {
  background: rgba(8, 14, 10, 0.92) !important;
  box-shadow: 0 18px 40px rgba(5, 12, 8, 0.65);
}

body.mg-theme .bg-gradient-to-br.from-slate-800\/90.to-slate-900\/90 {
  background: rgba(7, 13, 9, 0.9) !important;
  box-shadow: 0 14px 32px rgba(5, 12, 8, 0.55);
}

body.mg-theme .bg-gradient-to-br.from-slate-900.via-slate-800.to-slate-900 {
  background: rgba(7, 13, 9, 0.92) !important;
  box-shadow: 0 18px 40px rgba(5, 12, 8, 0.65);
}

body.mg-theme .bg-gray-900 { background-color: #060c08 !important; }
body.mg-theme .bg-slate-950 { background-color: #050b08 !important; }
body.mg-theme .bg-slate-950\/50 { background-color: rgba(5, 11, 8, 0.5) !important; }
body.mg-theme .bg-slate-950\/60 { background-color: rgba(5, 11, 8, 0.6) !important; }
body.mg-theme .bg-slate-900 { background-color: #08110c !important; }
body.mg-theme .bg-slate-900\/95 { background-color: rgba(8, 17, 12, 0.95) !important; }
body.mg-theme .bg-slate-900\/80 { background-color: rgba(8, 17, 12, 0.8) !important; }
body.mg-theme .bg-slate-900\/70 { background-color: rgba(8, 17, 12, 0.7) !important; }
body.mg-theme .bg-slate-900\/60 { background-color: rgba(8, 17, 12, 0.6) !important; }
body.mg-theme .bg-slate-900\/50 { background-color: rgba(8, 17, 12, 0.5) !important; }
body.mg-theme .bg-slate-900\/40 { background-color: rgba(8, 17, 12, 0.4) !important; }
body.mg-theme .bg-slate-900\/30 { background-color: rgba(8, 17, 12, 0.3) !important; }
body.mg-theme .bg-slate-900\/20 { background-color: rgba(8, 17, 12, 0.2) !important; }
body.mg-theme .bg-slate-900\/90 { background-color: rgba(8, 17, 12, 0.9) !important; }
body.mg-theme .bg-slate-800 { background-color: #0c1812 !important; }
body.mg-theme .bg-slate-800\/60 { background-color: rgba(12, 24, 18, 0.6) !important; }
body.mg-theme .bg-slate-800\/50 { background-color: rgba(12, 24, 18, 0.5) !important; }
body.mg-theme .bg-slate-800\/40 { background-color: rgba(12, 24, 18, 0.4) !important; }
body.mg-theme .bg-slate-800\/20 { background-color: rgba(12, 24, 18, 0.2) !important; }
body.mg-theme .bg-slate-700 { background-color: #12241a !important; }
body.mg-theme .bg-slate-700\/50 { background-color: rgba(18, 36, 26, 0.5) !important; }

body.mg-theme .border-slate-800 { border-color: #1a3023 !important; }
body.mg-theme .border-slate-700 { border-color: #203826 !important; }
body.mg-theme .border-slate-600 { border-color: #2a4a33 !important; }

body.mg-theme .text-slate-200 { color: #dbe7d9 !important; }
body.mg-theme .text-slate-300 { color: #b7c9bb !important; }
body.mg-theme .text-slate-300\/80 { color: rgba(183, 201, 187, 0.8) !important; }
body.mg-theme .text-slate-400 { color: #8fa59a !important; }
body.mg-theme .text-slate-500 { color: #71897d !important; }
body.mg-theme .text-slate-600 { color: #5b7268 !important; }
body.mg-theme .text-slate-700 { color: #4b5e56 !important; }

body.mg-theme .text-yellow-200 { color: #d2ffe2 !important; }
body.mg-theme .text-yellow-300 { color: #baf7d1 !important; }
body.mg-theme .text-yellow-400 { color: #7df2a3 !important; }
body.mg-theme .text-yellow-400\/80 { color: rgba(125, 242, 163, 0.8) !important; }
body.mg-theme .text-yellow-500 { color: #64dc8f !important; }
body.mg-theme .text-yellow-500\/80 { color: rgba(100, 220, 143, 0.8) !important; }
body.mg-theme .text-blue-200 { color: #c9f8d7 !important; }
body.mg-theme .text-blue-300 { color: #aeecc6 !important; }
body.mg-theme .text-blue-400 { color: #7df2a3 !important; }
body.mg-theme .text-blue-500 { color: #62d88c !important; }
body.mg-theme .text-blue-100 { color: #e3f7ea !important; }
body.mg-theme .text-blue-50 { color: #f2fff7 !important; }
body.mg-theme .text-sky-400 { color: #7df2a3 !important; }
body.mg-theme .text-sky-200 { color: #c9f8d7 !important; }
body.mg-theme .text-indigo-400 { color: #7df2a3 !important; }
body.mg-theme .text-indigo-200 { color: #c9f8d7 !important; }
body.mg-theme .text-purple-400 { color: #7df2a3 !important; }
body.mg-theme .text-purple-200 { color: #c9f8d7 !important; }
body.mg-theme .text-purple-500 { color: #62d88c !important; }
body.mg-theme .text-cyan-300 { color: #7df2a3 !important; }
body.mg-theme .text-amber-300 { color: #7df2a3 !important; }
body.mg-theme .text-pink-300 { color: #7df2a3 !important; }
body.mg-theme .text-emerald-200 { color: #c9f8d7 !important; }
body.mg-theme .text-emerald-300 { color: #aeecc6 !important; }
body.mg-theme .text-emerald-400 { color: #7df2a3 !important; }

body.mg-theme .placeholder-slate-500::placeholder { color: #6f847b !important; }

body.mg-theme .bg-yellow-400 { background-color: #7df2a3 !important; }
body.mg-theme .bg-yellow-500 { background-color: #64dc8f !important; }
body.mg-theme .bg-yellow-400\/10 { background-color: rgba(125, 242, 163, 0.12) !important; }
body.mg-theme .bg-yellow-400\/20 { background-color: rgba(125, 242, 163, 0.2) !important; }
body.mg-theme .bg-yellow-500\/20 { background-color: rgba(100, 220, 143, 0.2) !important; }
body.mg-theme .bg-blue-400 { background-color: #7df2a3 !important; }
body.mg-theme .bg-blue-500 { background-color: #62d88c !important; }
body.mg-theme .bg-blue-500\/10 { background-color: rgba(98, 216, 140, 0.12) !important; }
body.mg-theme .bg-blue-500\/20 { background-color: rgba(98, 216, 140, 0.2) !important; }
body.mg-theme .bg-emerald-500\/10 { background-color: rgba(98, 216, 140, 0.12) !important; }
body.mg-theme .bg-emerald-400\/40 { background-color: rgba(125, 242, 163, 0.45) !important; }
body.mg-theme .bg-blue-900\/20 { background-color: rgba(7, 17, 12, 0.2) !important; }
body.mg-theme .bg-blue-900\/40 { background-color: rgba(7, 17, 12, 0.4) !important; }
body.mg-theme .bg-blue-900 { background-color: #07110c !important; }
body.mg-theme .bg-blue-800 { background-color: #0a1510 !important; }
body.mg-theme .bg-blue-700 { background-color: #0f1f17 !important; }
body.mg-theme .bg-sky-500\/10 { background-color: rgba(98, 216, 140, 0.12) !important; }
body.mg-theme .bg-purple-500\/10 { background-color: rgba(98, 216, 140, 0.12) !important; }
body.mg-theme .bg-indigo-500\/10 { background-color: rgba(98, 216, 140, 0.12) !important; }
body.mg-theme .border-yellow-400 { border-color: #7df2a3 !important; }
body.mg-theme .border-yellow-400\/30 { border-color: rgba(125, 242, 163, 0.35) !important; }
body.mg-theme .border-yellow-400\/40 { border-color: rgba(125, 242, 163, 0.45) !important; }
body.mg-theme .border-yellow-400\/50 { border-color: rgba(125, 242, 163, 0.55) !important; }
body.mg-theme .border-yellow-500\/20 { border-color: rgba(100, 220, 143, 0.25) !important; }
body.mg-theme .border-blue-400 { border-color: #7df2a3 !important; }
body.mg-theme .border-blue-400\/40 { border-color: rgba(125, 242, 163, 0.45) !important; }
body.mg-theme .border-blue-500\/50 { border-color: rgba(125, 242, 163, 0.55) !important; }
body.mg-theme .border-blue-500\/40 { border-color: rgba(125, 242, 163, 0.45) !important; }
body.mg-theme .border-blue-300 { border-color: rgba(125, 242, 163, 0.65) !important; }
body.mg-theme .border-blue-200 { border-color: rgba(201, 248, 215, 0.7) !important; }
body.mg-theme .border-sky-400 { border-color: #7df2a3 !important; }
body.mg-theme .border-sky-400\/40 { border-color: rgba(125, 242, 163, 0.45) !important; }
body.mg-theme .border-purple-400 { border-color: #7df2a3 !important; }
body.mg-theme .border-purple-400\/40 { border-color: rgba(125, 242, 163, 0.45) !important; }
body.mg-theme .border-purple-500\/50 { border-color: rgba(125, 242, 163, 0.55) !important; }
body.mg-theme .border-indigo-400 { border-color: #7df2a3 !important; }
body.mg-theme .border-indigo-400\/40 { border-color: rgba(125, 242, 163, 0.45) !important; }
body.mg-theme .border-red-400\/40 { border-color: rgba(255, 101, 104, 0.45) !important; }
body.mg-theme .border-emerald-400\/40 { border-color: rgba(125, 242, 163, 0.45) !important; }

body.mg-theme .ring-yellow-400\/20 { --tw-ring-color: rgba(125, 242, 163, 0.2) !important; }
body.mg-theme .ring-yellow-400 { --tw-ring-color: #7df2a3 !important; }
body.mg-theme .focus\:border-yellow-400:focus { border-color: #7df2a3 !important; }
body.mg-theme .focus\:ring-yellow-400\/20:focus { --tw-ring-color: rgba(125, 242, 163, 0.2) !important; }
body.mg-theme .ring-blue-400 { --tw-ring-color: #7df2a3 !important; }
body.mg-theme .ring-blue-500\/50 { --tw-ring-color: rgba(125, 242, 163, 0.55) !important; }

body.mg-theme .hover\:bg-yellow-400\/10:hover { background-color: rgba(125, 242, 163, 0.12) !important; }
body.mg-theme .hover\:bg-yellow-400\/20:hover { background-color: rgba(125, 242, 163, 0.2) !important; }
body.mg-theme .hover\:border-yellow-400:hover { border-color: #7df2a3 !important; }
body.mg-theme .hover\:border-yellow-400\/50:hover { border-color: rgba(125, 242, 163, 0.55) !important; }
body.mg-theme .hover\:text-yellow-400:hover { color: #7df2a3 !important; }
body.mg-theme .hover\:text-yellow-300:hover { color: #baf7d1 !important; }
body.mg-theme input[type="radio"],
body.mg-theme input[type="checkbox"] {
  accent-color: #7df2a3;
}
.text-\[10px\].uppercase {
  font-size: 0.75rem;
}
.toggle-track {
  background-color: #334155;
  box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.6);
}
.toggle input:checked ~ .toggle-track {
  background-color: #a3e635;
}
.toggle input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(1.25rem);
}
body.mg-theme .toggle-track {
  background-color: #334155;
  box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.6);
}
body.mg-theme .toggle input:checked ~ .toggle-track {
  background-color: #a3e635;
}
body.mg-theme .toggle input:checked ~ .toggle-track .toggle-thumb {
  transform: translateX(1.25rem);
}
body.mg-theme .hover\:border-blue-500\/50:hover { border-color: rgba(125, 242, 163, 0.55) !important; }
body.mg-theme .hover\:border-blue-400:hover { border-color: #7df2a3 !important; }
body.mg-theme .hover\:bg-blue-500\/10:hover { background-color: rgba(98, 216, 140, 0.12) !important; }
body.mg-theme .hover\:bg-blue-500\/20:hover { background-color: rgba(98, 216, 140, 0.2) !important; }
body.mg-theme .hover\:border-sky-500\/50:hover { border-color: rgba(125, 242, 163, 0.55) !important; }
body.mg-theme .hover\:bg-sky-500\/10:hover { background-color: rgba(98, 216, 140, 0.12) !important; }
body.mg-theme .hover\:border-purple-500\/50:hover { border-color: rgba(125, 242, 163, 0.55) !important; }
body.mg-theme .hover\:bg-purple-500\/10:hover { background-color: rgba(98, 216, 140, 0.12) !important; }

body.mg-theme .from-slate-800 { --tw-gradient-from: #0b1610 var(--tw-gradient-from-position); }
body.mg-theme .via-slate-900 { --tw-gradient-stops: var(--tw-gradient-from), #07110c var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.mg-theme .to-slate-800 { --tw-gradient-to: #0b1610 var(--tw-gradient-to-position); }
body.mg-theme .from-yellow-400 { --tw-gradient-from: rgba(125, 242, 163, 0.4) var(--tw-gradient-from-position); }
body.mg-theme .via-sky-400 { --tw-gradient-stops: var(--tw-gradient-from), rgba(88, 214, 160, 0.3) var(--tw-gradient-via-position), var(--tw-gradient-to); }
body.mg-theme .cart-active {
  border-color: rgba(255, 77, 77, 0.95) !important;
  box-shadow: 0 0 12px rgba(255, 77, 77, 0.55);
  animation: cartPulseRed 1.4s ease-out infinite;
}

body.mg-theme .js-like-form svg {
  color: #ff4d4d !important;
  stroke: #ff4d4d !important;
}
body {
  font-family: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Additional MG Theme Components */
:root {
  --mg-bg: #07100b;
  --mg-panel: rgba(8, 14, 10, 0.92);
  --mg-border: #2c4733;
  --mg-accent: #7df2a3;
  --mg-muted: #9cc9a7;
}

.mg-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0;
}

.mg-input {
  border-color: #35563c !important;
  background: rgba(5, 11, 7, 0.75) !important;
}

.mg-card {
  border: 1px solid #2b4632 !important;
  background: rgba(7, 13, 9, 0.9) !important;
}

.mg-card:hover {
  border-color: #7df2a3 !important;
  box-shadow: 0 0 20px rgba(94, 204, 130, 0.25);
}

.mg-pill {
  border: 1px solid #3e6245;
  background: rgba(9, 16, 12, 0.9);
  color: var(--mg-muted);
}

.mg-pill-hover:hover {
  border-color: #7df2a3;
  background: rgba(16, 28, 20, 0.95);
  color: #e6f7ea;
  box-shadow: 0 0 18px rgba(125, 242, 163, 0.2);
}