/* shadcn/ui design tokens — Tailwind CDN compatible */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --background:    0 0% 100%;
  --foreground:    222.2 84% 4.9%;
  --card:          0 0% 100%;
  --card-fg:       222.2 84% 4.9%;
  --border:        214.3 31.8% 91.4%;
  --input:         214.3 31.8% 91.4%;
  --primary:       222.2 47.4% 11.2%;
  --primary-fg:    210 40% 98%;
  --secondary:     210 40% 96.1%;
  --secondary-fg:  222.2 47.4% 11.2%;
  --muted:         210 40% 96.1%;
  --muted-fg:      215.4 16.3% 46.9%;
  --accent:        210 40% 96.1%;
  --accent-fg:     222.2 47.4% 11.2%;
  --destructive:   0 84.2% 60.2%;
  --destructive-fg:210 40% 98%;
  --ring:          222.2 84% 4.9%;
  --radius:        0.5rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5; background: hsl(var(--background)); color: hsl(var(--foreground)); }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, select, textarea { font: inherit; }
[x-cloak] { display: none !important; }

/* Hero slide transitions */
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
.slide.active { opacity: 1; pointer-events: all; z-index: 1; }
.slide-content > * { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms ease; }
.slide.active .slide-content > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 100ms; }
.slide.active .slide-content > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 220ms; }
.slide.active .slide-content > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 340ms; }
.slide.active .slide-content > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 460ms; }

/* Product image hover */
.product-img { transition: transform 500ms ease; }
.group:hover .product-img { transform: scale(1.03); }

/* Quick add on hover */
.quick-add { opacity: 0; transform: translateY(4px); transition: opacity 150ms, transform 150ms; }
.group:hover .quick-add { opacity: 1; transform: translateY(0); }

/* Zoom overlay */
.zoom-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 300; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 3px; }

/* Focus ring — shadcn style */
.focus-ring:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }

/* shadcn-like input */
.sh-input {
  display: flex; width: 100%; height: 36px; padding: 0 12px;
  border: 1px solid hsl(var(--input)); border-radius: var(--radius);
  background: hsl(var(--background)); font-size: 14px;
  transition: border-color 150ms; outline: none;
}
.sh-input:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsla(var(--ring)/.12); }
.sh-input::placeholder { color: hsl(var(--muted-fg)); }

.sh-select {
  display: flex; width: 100%; height: 36px; padding: 0 12px;
  border: 1px solid hsl(var(--input)); border-radius: var(--radius);
  background: hsl(var(--background)); font-size: 14px;
  transition: border-color 150ms; outline: none; cursor: pointer;
}
.sh-select:focus { border-color: hsl(var(--ring)); }

.sh-textarea {
  display: flex; width: 100%; padding: 8px 12px;
  border: 1px solid hsl(var(--input)); border-radius: var(--radius);
  background: hsl(var(--background)); font-size: 14px; line-height: 1.5;
  transition: border-color 150ms; outline: none; resize: none;
}
.sh-textarea:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsla(var(--ring)/.12); }

/* shadcn button variants */
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius); font-size: 14px; font-weight: 500;
  transition: all 150ms; white-space: nowrap; padding: 8px 16px; height: 36px;
  outline: none; cursor: pointer; border: 1px solid transparent;
}
.sh-btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.sh-btn:disabled { opacity: .5; pointer-events: none; }

.sh-btn-default  { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); }
.sh-btn-default:hover { opacity: .9; }
.sh-btn-outline  { border-color: hsl(var(--input)); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.sh-btn-outline:hover { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); }
.sh-btn-ghost    { background: transparent; color: hsl(var(--foreground)); }
.sh-btn-ghost:hover { background: hsl(var(--accent)); color: hsl(var(--accent-fg)); }
.sh-btn-secondary{ background: hsl(var(--secondary)); color: hsl(var(--secondary-fg)); }
.sh-btn-secondary:hover { opacity: .8; }
.sh-btn-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-fg)); }
.sh-btn-destructive:hover { opacity: .9; }
.sh-btn-sm  { height: 32px; padding: 6px 12px; font-size: 13px; border-radius: calc(var(--radius) - 2px); }
.sh-btn-lg  { height: 44px; padding: 0 32px; font-size: 15px; }
.sh-btn-icon{ width: 36px; height: 36px; padding: 0; }

/* shadcn card */
.sh-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.sh-card-header { padding: 20px 24px 0; }
.sh-card-content { padding: 20px 24px; }
.sh-card-footer { padding: 0 24px 20px; display: flex; align-items: center; }

/* shadcn badge */
.sh-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 2px 10px; font-size: 12px; font-weight: 600; border: 1px solid transparent; transition: all 150ms; }
.sh-badge-default     { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); }
.sh-badge-secondary   { background: hsl(var(--secondary)); color: hsl(var(--secondary-fg)); border-color: transparent; }
.sh-badge-outline     { color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.sh-badge-destructive { background: hsl(var(--destructive)); color: hsl(var(--destructive-fg)); }
.sh-badge-success     { background: #dcfce7; color: #166534; }
.sh-badge-warning     { background: #fef9c3; color: #854d0e; }
.sh-badge-info        { background: #dbeafe; color: #1e40af; }

/* shadcn separator */
.sh-sep { border: none; border-top: 1px solid hsl(var(--border)); }

/* shadcn label */
.sh-label { font-size: 14px; font-weight: 500; line-height: 1; color: hsl(var(--foreground)); }
.sh-label-sm { font-size: 12px; font-weight: 500; color: hsl(var(--muted-fg)); letter-spacing: .02em; }

/* shadcn table */
.sh-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sh-table th { height: 40px; padding: 0 16px; text-align: left; font-size: 13px; font-weight: 500; color: hsl(var(--muted-fg)); border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; }
.sh-table td { height: 52px; padding: 0 16px; vertical-align: middle; border-bottom: 1px solid hsl(var(--border)); }
.sh-table tr:last-child td { border-bottom: none; }
.sh-table tr:hover td { background: hsl(var(--muted)/.5); }

/* shadcn alert */
.sh-alert { border-radius: var(--radius); border: 1px solid hsl(var(--border)); padding: 12px 16px; display: flex; gap: 12px; font-size: 14px; }
.sh-alert-destructive { border-color: hsl(var(--destructive)/.4); background: hsl(var(--destructive)/.05); color: hsl(var(--destructive)); }
.sh-alert-success { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }

/* Cart drawer animation */
.drawer-in  { animation: drawerSlideIn 250ms cubic-bezier(.32,.72,0,1) forwards; }
.drawer-out { animation: drawerSlideOut 200ms ease-in forwards; }
@keyframes drawerSlideIn  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawerSlideOut { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* Spinner */
.sh-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: spin .65s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }