/* ══════════════════════════════════════════════════════════════════════════════
   MTG BASE — Variables, Reset, Layout, Buttons, Shared
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --darkBrown: #41392f;
  --lightBrown: #675a4a;
  --lightEggshell: #ebe4d6;
  --darkerEggshell: #e8e2d5; /* Used for exclude/include background */
  --white: #ffffff;
  --input-background: #f8f5ef;
  --input-background-hover: #f5edde;
  --filterBackground: #ebe5da;
  --filterTextColor: #5a5349;
  --accent-foreground: #302920;
  --yellow: #f4c351;
  --yellow-hover: #f7ca62;
  --filterInputBackground: #f8f5ef;
  --filterHover: #dfd8c8;
  --font-serif: "Crimson Pro", serif;
  --font-sans: "Manrope", sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  --foreground: #2d2418;
  --muted-foreground: #6b5f4f;
  --muted: #e2dbce;
  --mutedHover: #d8c8ac;
  --border: #2d24181f;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;

  --color-purple-100: oklch(94.6% 0.033 307.174);
  --color-purple-200: oklch(90.2% 0.063 306.703);
  --color-purple-400: oklch(71.4% 0.203 305.504);
  --color-purple-700: oklch(49.6% 0.265 301.924);
  --color-purple-800: oklch(43.8% 0.218 303.724);

  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-900: oklch(39.3% 0.095 152.535);

  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-900: oklch(37.9% 0.146 265.522);

  --color-purple-100: oklch(94.6% 0.033 307.174);
  --color-purple-200: oklch(90.2% 0.063 306.703);
  --color-purple-400: oklch(71.4% 0.203 305.504);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-purple-700: oklch(49.6% 0.265 301.924);
  --color-purple-800: oklch(43.8% 0.218 303.724);

  --color-orange-50: oklch(98% 0.016 73.684);
  --color-orange-100: oklch(95.4% 0.038 75.164);
  --color-orange-200: oklch(90.1% 0.076 70.697);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-700: oklch(55.3% 0.195 38.402);
  --color-orange-800: oklch(47% 0.157 37.304);

  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);

  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-700: oklch(50.5% 0.213 27.518);

  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-800: oklch(27.9% 0.041 260.031);

  --destructive: #c94a3d;

  --spacing: 0.25rem;
  --radius: 0.5rem;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
body * {
  margin: 0;
  padding: 0;
}

/* ── WordPress footer ────────────────────────────────── */
.ct-footer {
  z-index: 101;
}

.ct-header {
  z-index: 101;
}

/* ── Overall layout ───────────────────────────────────────────────────────── */
.mtg-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-sans);
  background: #f5f3ee;
}

.mtg-body {
  display: flex;
  flex: 1;
  position: relative;
  overflow: visible;
}

/* ── Main content area ────────────────────────────────────────────────────── */
.mtg-main {
  flex: 1;
  padding: 1rem 1.25rem;
  min-width: 0;
  transition: margin-left 0.25s ease;
  background-color: var(--lightEggshell);
  container-type: inline-size;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.mtg-btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
}
.mtg-btn-primary {
  background: var(--darkBrown);
  color: #fff;
  border: none;
}
.mtg-btn-primary:hover {
  background: var(--lightBrown);
}
.mtg-btn-ghost {
  background: #fff;
  color: #333;
  border: 1px solid #ccc;
}
.mtg-btn-ghost:hover {
  background: #f5f5f5;
}
.mtg-btn-sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

/* ── Status & spinner ─────────────────────────────────────────────────────── */
.mtg-status {
  font-size: 13px;
  color: #777;
  margin-bottom: 1rem;
  min-height: 18px;
  margin-top: 20px;
}
.mtg-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid #ddd;
  border-top-color: #555;
  border-radius: 50%;
  animation: mtg-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes mtg-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Shared qty controls (used in cart + list view) ───────────────────────── */
.mtg-qty-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.mtg-qty-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #ddd;
  background: #f8f8f8;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.mtg-qty-btn:hover {
  background: #eee;
}
.mtg-qty-input {
  --has-width: 36px;
  --has-height: 24px;
  text-align: left;

  --theme-form-font-size: 13px;
  --theme-form-field-padding: 0;
  --theme-form-field-border-width: 0px;
  --theme-form-field-border-radius: 4px;
  --theme-form-field-border-initial-color: #ddd;
}

.mtg-qty-input:focus {
  --theme-form-field-border-width: 1px;
}

.mtg-qty-input:hover {
  --theme-form-field-background-initial-color: var(--color-amber-50);
  --theme-form-text-initial-color: var(--color-amber-600);

  background-color: var(--color-amber-50);
  color: var(--color-amber-600);
}

.mtg-qty-input::-webkit-inner-spin-button,
.mtg-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  opacity: 0;
}
.mtg-qty-input:hover::-webkit-inner-spin-button,
.mtg-qty-input:hover::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  opacity: 1;
  cursor: pointer;
}

.mtg-qty-input:focus::-webkit-inner-spin-button,
.mtg-qty-input:focus::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  opacity: 1;
  cursor: pointer;
}

/* ── Shared rarity badges (used in cards + cart) ──────────────────────────── */
.mtg-rarity-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  width: fit-content;
}
.mtg-rarity-badge--common {
  background: #f0f0f0;
  color: #555;
  border-color: #ccc;
}
.mtg-rarity-badge--uncommon {
  background: #dff0f8;
  color: #1a6a8a;
  border-color: #7ab8d4;
}
.mtg-rarity-badge--rare {
  background: #fef9e7;
  color: #8a6010;
  border-color: #c9a84c;
}
.mtg-rarity-badge--mythic {
  background: #fff1eb;
  color: #9a3d10;
  border-color: #e07840;
}
.mtg-rarity-badge--bonus {
  background: #f3fcee;
  color: #0f8a0f;
  border-color: #16c615;
}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.mtg-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 1.5rem 0;
}
.mtg-page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 2px solid var(--border);
  color: var(--darkBrown);
  background: none;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
  font-weight: 600;
}
.mtg-page-btn:hover {
  background: var(--darkBrown);
  color: #fff;
}
.mtg-page-btn--active {
  background: var(--darkBrown);
  color: #fff;
  border-color: var(--darkBrown);
}
.mtg-page-btn--nav {
  font-weight: 600;
}

/* ── Sidebar overlay (unused — sidebars push content) ────────────────────── */
.mtg-sidebar-overlay {
  display: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
}