@import "tailwindcss";
@import "tw-animate-css";
@import "../vendor/shadcn-tailwind-4.13.0.css";

@utility scrollbar-thin {
  scrollbar-width: thin;
}

@utility scrollbar-none {
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

@utility scrollbar-gutter-stable {
  scrollbar-gutter: stable;
}

:root {
  --background: #f5f7f5;
  --foreground: #1f2937;
  --card: #ffffff;
  --card-foreground: #1f2937;
  --popover: #ffffff;
  --popover-foreground: #1f2937;
  --primary: #00a86b;
  --primary-foreground: #ffffff;
  --secondary: #e9edf3;
  --secondary-foreground: #1f2937;
  --muted: #eef1f5;
  --muted-foreground: #667085;
  --accent: #e7fbf2;
  --accent-foreground: #087a50;
  --destructive: #dc2626;
  --border: #dfe7e2;
  --input: #d9dee7;
  --ring: #00a86b;
  --chart-1: #00a86b;
  --chart-2: #e6007e;
  --chart-3: #143c2d;
  --chart-4: #f4b740;
  --chart-5: #7c3aed;
  --radius: 1.125rem;
  --sidebar: #143c2d;
  --sidebar-foreground: #f8fafc;
  --sidebar-primary: #00a86b;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #235b45;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #326e56;
  --sidebar-ring: #42d49e;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --font-sans: Tahoma, Arial, Helvetica, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #111827;
    --foreground: #f8fafc;
    --card: #172033;
    --card-foreground: #f8fafc;
    --popover: #172033;
    --popover-foreground: #f8fafc;
    --secondary: #243047;
    --secondary-foreground: #f8fafc;
    --muted: #243047;
    --muted-foreground: #b5bfd0;
    --accent: #173f42;
    --accent-foreground: #a7f3ed;
    --border: #2b3850;
    --input: #394863;
    --ring: #ed6679;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  min-height: 100vh;
  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
button, input, textarea, select { font: inherit; }
.container-shell { width: min(var(--shop-max-width, 1460px), calc(100% - 32px)); margin-inline: auto; }
.consumer-price { color: #111111; text-decoration-line: line-through; text-decoration-color: #e11d48; text-decoration-thickness: 2px; text-decoration-skip-ink: none; }
.glass-shadow { box-shadow: 0 20px 55px rgba(17, 34, 56, 0.12); }
.scroll-snap-x { scroll-snap-type: x mandatory; scrollbar-width: none; }
.scroll-snap-x::-webkit-scrollbar { display: none; }
.scroll-snap-x > * { scroll-snap-align: start; }
@keyframes soft-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.soft-rise { animation: soft-rise 420ms ease-out both; }
@media (prefers-color-scheme: light) { .shop-root .bg-white { background-color: var(--shop-surface); } }
.catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .catalog-grid { grid-template-columns: repeat(var(--shop-product-columns, 5), minmax(0, 1fr)); } }
@media (max-width: 640px) { .container-shell { width: min(100% - 20px, var(--shop-max-width, 1460px)); } }