*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #18181b;
  background-color: #f4f4f5;
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  background-color: #18181b;
  color: #fff;
  font-weight: 600;
  transition: opacity 0.15s ease;
}
.btn-primary:hover {
  opacity: 0.9;
}

.dark .site-logo {
  filter: invert(1);
}

.dark .partner-logo {
  filter: brightness(1.35);
}

.marquee-fade {
  background-image: linear-gradient(to right, #f4f4f5, rgba(244, 244, 245, 0));
}

.marquee-fade--end {
  background-image: linear-gradient(to left, #f4f4f5, rgba(244, 244, 245, 0));
}

.dark .marquee-fade {
  background-image: linear-gradient(to right, #1c1c1f, rgba(28, 28, 31, 0));
}

.dark .marquee-fade--end {
  background-image: linear-gradient(to left, #1c1c1f, rgba(28, 28, 31, 0));
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

html.dark {
  color-scheme: dark;
}

.dark body {
  background-color: #1c1c1f;
  color: #e4e4e7;
}

.dark .bg-white {
  background-color: #26262a;
}

.dark .bg-zinc-50 {
  background-color: #1c1c1f;
}

.dark .bg-zinc-100 {
  background-color: #33333a;
}

.dark .bg-zinc-200 {
  background-color: #3f3f46;
}

.dark .bg-zinc-200\/70 {
  background-color: rgba(63, 63, 70, 0.7);
}

.dark .bg-zinc-300 {
  background-color: #52525b;
}

.dark .bg-zinc-400 {
  background-color: #71717a;
}

.dark .bg-white\/90 {
  background-color: rgba(38, 38, 42, 0.9);
}

.dark .bg-white\/80 {
  background-color: rgba(38, 38, 42, 0.85);
}

.dark .text-zinc-900 {
  color: #f4f4f5;
}

.dark .text-zinc-800 {
  color: #e4e4e7;
}

.dark .text-zinc-700 {
  color: #d4d4d8;
}

.dark .text-zinc-600 {
  color: #b7b7bf;
}

.dark .text-zinc-500 {
  color: #a1a1aa;
}

.dark .text-zinc-400 {
  color: #8a8a93;
}

.dark .border-zinc-100 {
  border-color: #27272a;
}

.dark .border-zinc-200 {
  border-color: #3f3f46;
}

.dark .border-zinc-300 {
  border-color: #52525b;
}

.dark .hover\:border-zinc-300:hover {
  border-color: #52525b;
}

.dark .has-\[\:checked\]\:border-gold-500:has(:checked) {
  border-color: #d4a017;
}

.dark .divide-zinc-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #27272a;
}

.dark .bg-gold-50 {
  background-color: rgba(212, 160, 23, 0.12);
}

.dark .bg-gold-50\/50,
.dark .has-\[\:checked\]\:bg-gold-50\/50:has(:checked) {
  background-color: rgba(212, 160, 23, 0.08);
}

.dark .bg-gold-100 {
  background-color: rgba(212, 160, 23, 0.18);
}

.dark .bg-gold-100\/70 {
  background-color: rgba(212, 160, 23, 0.14);
}

.dark .bg-gold-300 {
  background-color: rgba(212, 160, 23, 0.28);
}

.dark .bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.1);
}

.dark .bg-amber-100 {
  background-color: rgba(245, 158, 11, 0.16);
}

.dark .bg-emerald-50 {
  background-color: rgba(16, 185, 129, 0.1);
}

.dark .bg-emerald-50\/50 {
  background-color: rgba(16, 185, 129, 0.07);
}

.dark .bg-emerald-100 {
  background-color: rgba(16, 185, 129, 0.16);
}

.dark .bg-rose-50 {
  background-color: rgba(244, 63, 94, 0.1);
}

.dark .bg-rose-50\/50 {
  background-color: rgba(244, 63, 94, 0.07);
}

.dark .bg-rose-100 {
  background-color: rgba(244, 63, 94, 0.16);
}

.dark .bg-red-50 {
  background-color: rgba(220, 38, 38, 0.12);
}

.dark .bg-sky-50 {
  background-color: rgba(14, 165, 233, 0.1);
}

.dark .bg-sky-100 {
  background-color: rgba(14, 165, 233, 0.16);
}

.dark .text-gold-600 {
  color: #e8b823;
}

.dark .text-gold-700 {
  color: #f2c94c;
}

.dark .text-gold-800 {
  color: #f8dd85;
}

.dark .text-amber-600 {
  color: #fbbf24;
}

.dark .text-amber-700 {
  color: #fcd34d;
}

.dark .text-amber-800 {
  color: #fde68a;
}

.dark .text-emerald-600 {
  color: #34d399;
}

.dark .text-emerald-700 {
  color: #6ee7b7;
}

.dark .text-emerald-800 {
  color: #a7f3d0;
}

.dark .text-rose-600 {
  color: #fb7185;
}

.dark .text-rose-700 {
  color: #fda4af;
}

.dark .text-rose-800 {
  color: #fecdd3;
}

.dark .text-red-600 {
  color: #f87171;
}

.dark .text-sky-700 {
  color: #7dd3fc;
}

.dark .hover\:text-gold-700:hover {
  color: #f2c94c;
}

.dark .hover\:text-rose-600:hover {
  color: #fb7185;
}

.dark .hover\:text-emerald-800:hover {
  color: #a7f3d0;
}

.dark .from-gold-400.text-zinc-900,
.dark .bg-gold-400.text-zinc-900,
.dark .bg-gold-500.text-zinc-900,
.dark .bg-gold-600.text-zinc-900,
.dark .bg-amber-400.text-zinc-900 {
  color: #18181b;
}

.dark .hover\:bg-gold-600.hover\:text-zinc-900:hover {
  color: #18181b;
}

.dark .bg-clip-text.bg-zinc-900 {
  background-color: #fafafa;
}

.dark ::placeholder {
  color: #71717a;
}

.dark .from-zinc-50 {
  --tw-gradient-from: #1c1c1f var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(28, 28, 31, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-zinc-100 {
  --tw-gradient-from: #27272a var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(39, 39, 42, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-zinc-200 {
  --tw-gradient-from: #2e2e33 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(46, 46, 51, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-zinc-300 {
  --tw-gradient-from: #33333a var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(51, 51, 58, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-zinc-400 {
  --tw-gradient-from: #3f3f46 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(63, 63, 70, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-gold-300 {
  --tw-gradient-from: #8a6114 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(138, 97, 20, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-amber-300 {
  --tw-gradient-from: #b45309 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(180, 83, 9, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-amber-400 {
  --tw-gradient-from: #92400e var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(146, 64, 14, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-emerald-300 {
  --tw-gradient-from: #047857 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(4, 120, 87, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-emerald-400 {
  --tw-gradient-from: #065f46 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(6, 95, 70, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-rose-300 {
  --tw-gradient-from: #be123c var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(190, 18, 60, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-sky-300 {
  --tw-gradient-from: #0369a1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(3, 105, 161, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-sky-400 {
  --tw-gradient-from: #075985 var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(7, 89, 133, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .from-fuchsia-300 {
  --tw-gradient-from: #a21caf var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(162, 28, 175, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .to-zinc-200 {
  --tw-gradient-to: #33333a var(--tw-gradient-to-position);
}

.dark .to-zinc-300 {
  --tw-gradient-to: #3f3f46 var(--tw-gradient-to-position);
}

.dark .to-zinc-500 {
  --tw-gradient-to: #52525b var(--tw-gradient-to-position);
}

.dark .to-zinc-600 {
  --tw-gradient-to: #52525b var(--tw-gradient-to-position);
}

.dark .to-amber-400 {
  --tw-gradient-to: #92400e var(--tw-gradient-to-position);
}

.dark .to-yellow-500 {
  --tw-gradient-to: #713f12 var(--tw-gradient-to-position);
}

.dark .to-orange-400 {
  --tw-gradient-to: #9a3412 var(--tw-gradient-to-position);
}

.dark .to-orange-500 {
  --tw-gradient-to: #7c2d12 var(--tw-gradient-to-position);
}

.dark .to-teal-400 {
  --tw-gradient-to: #115e59 var(--tw-gradient-to-position);
}

.dark .to-teal-500 {
  --tw-gradient-to: #134e4a var(--tw-gradient-to-position);
}

.dark .to-cyan-400 {
  --tw-gradient-to: #155e75 var(--tw-gradient-to-position);
}

.dark .to-blue-400 {
  --tw-gradient-to: #1e40af var(--tw-gradient-to-position);
}

.dark .to-blue-500 {
  --tw-gradient-to: #1e3a8a var(--tw-gradient-to-position);
}

.dark .to-pink-400 {
  --tw-gradient-to: #9d174d var(--tw-gradient-to-position);
}

.dark .hover\:bg-zinc-50:hover {
  background-color: #27272a;
}

.dark .hover\:bg-zinc-100:hover {
  background-color: #27272a;
}

.dark .hover\:bg-zinc-200:hover {
  background-color: #3f3f46;
}

.dark .hover\:text-zinc-900:hover {
  color: #f4f4f5;
}

.dark .hover\:text-zinc-800:hover {
  color: #e4e4e7;
}

.dark .hover\:text-zinc-700:hover {
  color: #d4d4d8;
}

.dark .hover\:text-zinc-600:hover {
  color: #c4c4cc;
}

@media print {
  body {
    background: #fff;
  }
  header,
  footer,
  #cart-drawer,
  #toast-root,
  [data-no-print],
  [data-modal],
  [data-confirm-dialog] {
    display: none !important;
  }
  main {
    max-width: none !important;
    padding: 0 !important;
  }
  [data-print-flat] {
    display: block !important;
  }
  [data-receipt] {
    box-shadow: none !important;
    border-radius: 0 !important;
  }
}