:root {
  --font-manrope: "Manrope", sans-serif;
  --font-outfit: "Outfit", sans-serif;
  --color-brand: #1b3a6b;
  --color-brand-dark: #12284d;
  --color-brand-light: #2a5aa8;
  --color-accent: #e11d2e;
  --color-surface: #f5f8fc;
}

html,
body {
  background-color: #ffffff;
  font-family: var(--font-manrope);
  font-weight: 500;
  color: #12284d;
}

*,
*::before,
*::after {
  font-family: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-outfit);
  font-weight: 600;
}

p, li, a, button, span, label, input, textarea, select {
  font-family: var(--font-manrope);
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html, body, * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.product-price-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1b3a6b 0%, #e5eaf3 100%);
  outline: none;
  cursor: pointer;
}

.product-price-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #1b3a6b;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.product-price-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #1b3a6b;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

@keyframes td-spin {
  to { transform: rotate(360deg); }
}

.td-spinner {
  animation: td-spin 0.85s linear infinite;
}

@keyframes td-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.td-shimmer {
  background: linear-gradient(90deg, #e8f0fb 0%, #f5f8fc 40%, #e8f0fb 80%);
  background-size: 800px 100%;
  animation: td-shimmer 1.25s ease-in-out infinite;
}

#td-toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.td-toast {
  pointer-events: auto;
  min-width: 220px;
  max-width: 360px;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 8px 24px rgba(18, 40, 77, 0.18);
  animation: td-toast-in 0.25s ease;
}

.td-toast.success { background: #1a9e4a; }
.td-toast.error { background: #e11d2e; }
.td-toast.info { background: #1b3a6b; }

@keyframes td-toast-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.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;
}

.cart-drawer-open { overflow: hidden; }

.mobile-nav-open { overflow: hidden; }
