/** Shopify CDN: Minification failed

Line 97:18 Expected identifier but found whitespace
Line 97:20 Unexpected "{"
Line 97:30 Expected ":"
Line 98:21 Expected identifier but found whitespace
Line 98:23 Unexpected "{"
Line 98:33 Expected ":"
Line 99:15 Expected identifier but found whitespace
Line 99:17 Unexpected "{"
Line 99:27 Expected ":"
Line 100:21 Expected identifier but found whitespace
... and 9 more hidden warnings

**/
/* ==========================================================================
   Triple M Trading Cards - Base Styles
   ========================================================================== */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('poppins-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('poppins-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('poppins-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('poppins-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('poppins-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('poppins-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('poppins-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('poppins-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   CSS Custom Properties (Easy to change!)
   -------------------------------------------------------------------------- */
:root {
  /* Colors - These can be overridden by theme settings */
  --color-primary: {{ settings.color_primary }};
  --color-background: {{ settings.color_background }};
  --color-text: {{ settings.color_text }};
  --color-text-light: {{ settings.color_text_light }};
  --color-border: {{ settings.color_border }};

  /* Derived colors */
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, black);
  --color-background-secondary: #f5f5f5;

  /* Typography - Easy to adjust */
  --font-nav: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-base: {{ settings.font_size_base }}px;

  /* Font scale (relative to base) */
  --font-size-xs: calc(var(--font-size-base) * 0.75);    /* 12px */
  --font-size-sm: calc(var(--font-size-base) * 0.875);   /* 14px */
  --font-size-md: var(--font-size-base);                  /* 16px */
  --font-size-lg: calc(var(--font-size-base) * 1.125);   /* 18px */
  --font-size-xl: calc(var(--font-size-base) * 1.25);    /* 20px */
  --font-size-2xl: calc(var(--font-size-base) * 1.5);    /* 24px */
  --font-size-3xl: calc(var(--font-size-base) * 2);      /* 32px */
  --font-size-4xl: calc(var(--font-size-base) * 2.5);    /* 40px */

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Layout */
  --container-max-width: 1400px;
  --announcement-bar-height: 36px;
  --announcement-bar-offset: var(--announcement-bar-height);
  --header-height: 70px;
  --dropdown-bar-height: 50px;

  /* Borders & Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;

  /* Z-index scale */
  --z-dropdown: 100;
  --z-header: 200;
  --z-modal: 300;
  --z-toast: 400;
}

html.no-announcement-bar {
  --announcement-bar-offset: 0px;
}

/* --------------------------------------------------------------------------
   Dark Mode Overrides
   Applied via .dark-mode class on <body>. Preference saved to localStorage.
   -------------------------------------------------------------------------- */
/* Light/dark mode image swapping (!important needed to override section styles) */
.logo-dark,
.hero-dark {
  display: none !important;
}

body.dark-mode .logo-light,
body.dark-mode .hero-light {
  display: none !important;
}

/* ---------- Product Card ---------- */
.product-card {
  background-color: var(--color-background);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.product-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.product-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-card__image-wrapper {
  position: relative;
  aspect-ratio: 3 / 4;
  background-color: var(--color-background-secondary);
  overflow: hidden;
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition-normal);
}

.product-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-border);
}

.product-card__placeholder svg {
  width: 48px;
  height: 48px;
}

.product-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
  border-radius: var(--border-radius-sm);
}

.product-card__badge--sold-out {
  background-color: var(--color-text);
  color: white;
}

.product-card__badge--sale {
  background-color: var(--color-primary);
  color: white;
}

.product-card__badge--sold-recent {
  background-color: #2563eb;
  color: white;
}

.product-card__info {
  padding: var(--space-md);
}

.product-card__title {
  font-size: var(--font-size-base);
  font-weight: normal;
  margin-bottom: 2px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card__meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin-bottom: 2px;
}

.product-card__stock {
  margin-bottom: var(--space-xs);
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.product-card--sealed-sold-out .product-card__image {
  filter: grayscale(0.9);
  opacity: 0.55;
}

.product-card--sealed-sold-out .product-card__image-wrapper::after {
  content: "";
  position: absolute;
  left: -18%;
  right: -18%;
  top: 50%;
  height: 4px;
  background: color-mix(in srgb, var(--color-text) 78%, transparent);
  transform: rotate(-28deg);
  transform-origin: center;
  z-index: 2;
  pointer-events: none;
}

.product-card.hidden {
  display: none;
}

.product-card__price {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  min-width: 0;
}

.product-card__compare-price {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  text-decoration: line-through;
}

.product-card__current-price {
  font-size: var(--font-size-md);
  font-weight: normal;
}

.product-card__current-price--sale {
  color: var(--color-primary);
}

.product-card__price-status {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 1px 4px;
  border-radius: var(--border-radius-sm);
  background-color: #0f766e;
  color: white;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}

body.dark-mode .logo-dark,
body.dark-mode .hero-dark {
  display: block !important;
}

body.dark-mode {
  /* Layer 0: page background */
  --color-background: #252525;
  /* Layer 1: sidebar, filter panels, inputs */
  --color-background-secondary: #303030;
  /* Text */
  --color-text: #ececec;
  --color-text-light: #a0a0a0;
  /* Borders - visible dividers */
  --color-border: #4e4e4e;
  /* Derived */
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, white);
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
}

/* ---------- Header & Nav ---------- */
body.dark-mode .site-header {
  background-color: #1e1e1e;
}

body.dark-mode .header-main {
  border-bottom-color: #4e4e4e;
}

body.dark-mode .dropdown-bar {
  background-color: #1e1e1e;
  border-bottom-color: #4e4e4e;
}

/* ---------- Announcement Bar & Footer (inline style override) ---------- */
body.dark-mode .announcement-bar {
  background-color: #8b1a1a !important;
}

body.dark-mode .site-footer {
  background-color: #8b1a1a !important;
}

/* ---------- Product Cards ---------- */
body.dark-mode .product-card {
  background-color: #2e2e2e;
  border-color: #4e4e4e;
}

body.dark-mode .product-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  border-color: #555;
}

body.dark-mode .product-card__image-wrapper {
  background-color: #333333;
}

/* ---------- Collection Page: Filter Sidebar ---------- */
body.dark-mode .filter-sidebar {
  background-color: #2e2e2e;
  border-color: #4e4e4e;
  color: var(--color-text);
}

body.dark-mode .filter-group__toggle {
  color: var(--color-text);
}

body.dark-mode .filter-group__toggle svg {
  stroke: var(--color-text-light);
}

body.dark-mode .filter-sidebar__title {
  color: var(--color-text);
}

body.dark-mode .price-range__input {
  background-color: #303030;
  color: var(--color-text);
  border-color: #4e4e4e;
}


/* ---------- Collection Page: Sort & Grid Controls ---------- */
body.dark-mode .collection-controls select,
body.dark-mode .collection-controls input {
  background-color: #2e2e2e;
  color: var(--color-text);
  border-color: #4e4e4e;
}

/* ---------- Product Page ---------- */
body.dark-mode .product-layout {
  background-color: #2e2e2e;
  border-color: #4e4e4e;
}

body.dark-mode .variant-selector__option {
  background-color: #303030;
  border-color: #4e4e4e;
}

body.dark-mode .variant-selector__option.is-selected {
  background-color: rgba(238, 65, 53, 0.1);
}

body.dark-mode .quantity-selector {
  border-color: #4e4e4e;
}

body.dark-mode .quantity-selector__btn {
  color: var(--color-text);
}

/* ---------- Buttons ---------- */
body.dark-mode .btn--secondary {
  background-color: #303030;
  border-color: #4e4e4e;
  color: var(--color-text);
}

body.dark-mode .btn--secondary:hover {
  background-color: #3a3a3a;
}

/* ---------- Inputs & Form Elements ---------- */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background-color: #303030;
  border-color: #4e4e4e;
  color: var(--color-text);
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
  border-color: var(--color-primary);
}

/* ---------- Modals ---------- */
body.dark-mode .search-modal__content,
body.dark-mode .about-modal__popup,
body.dark-mode .faq-modal__popup,
body.dark-mode .contact-modal__popup {
  background-color: #2e2e2e;
  color: var(--color-text);
}

/* ---------- Mega Menu Panels ---------- */
body.dark-mode .mega-menu__panel {
  background-color: #2e2e2e;
  border-color: #4e4e4e;
}

body.dark-mode .mega-menu__link:hover {
  background-color: #363636;
}

/* ---------- Hero ---------- */
body.dark-mode .hero__content {
  background: rgba(0, 0, 0, 0.5);
}

/* ---------- Checkboxes & filter tags ---------- */
body.dark-mode .active-filters__tag {
  background-color: #363636;
  border-color: #555;
}

/* --------------------------------------------------------------------------
   Font Face - Anime Ace 2
   Note: You'll need to upload the font files to assets/
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Anime Ace 2';
  src: url('{{ "AnimeAce2.woff2" | asset_url }}') format('woff2'),
       url('{{ "AnimeAce2.woff" | asset_url }}') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Anime Ace 2';
  src: url('{{ "AnimeAce2-Bold.woff2" | asset_url }}') format('woff2'),
       url('{{ "AnimeAce2-Bold.woff" | asset_url }}') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-background);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: bold;
  line-height: 1.2;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-md); }

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.container {
  width: 80%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: bold;
  text-align: center;
  border-radius: var(--border-radius-md);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-primary);
  color: white;
  border: 2px solid var(--color-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-text);
  border: 2px solid var(--color-border);
}

.btn--secondary:hover {
  border-color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-md);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-md);
  transition: border-color var(--transition-fast);
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Page Layout
   -------------------------------------------------------------------------- */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  padding-top: calc(var(--announcement-bar-offset) + var(--header-height) + var(--dropdown-bar-height));
}

@media (max-width: 900px) {
  .main-content {
    padding-top: calc(var(--announcement-bar-offset) + var(--header-height));
  }
}

/* --------------------------------------------------------------------------
   Product Grid
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-lg);
}

@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}