/* ==============================
   BUTTONS
   ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 50px; padding: 0 var(--space-8);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: .92rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  transition: all var(--transition);
  cursor: pointer; white-space: nowrap; border: none;
  position: relative; overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--transition);
}
.btn:hover::before { background: rgba(255,255,255,.08); }
.btn:active { transform: scale(.97); }

.btn--primary {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: 0 4px 20px rgba(139,26,26,.45);
}
.btn--primary:hover { box-shadow: 0 8px 32px rgba(139,26,26,.6); transform: translateY(-2px); }

.btn--gold {
  background: var(--grad-gold);
  color: #0F0908;
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover { box-shadow: 0 8px 32px rgba(201,149,42,.5); transform: translateY(-2px); }

.btn--outline {
  background: transparent;
  color: var(--color-gold-light);
  border: 1.5px solid var(--color-gold);
}
.btn--outline:hover { background: rgba(201,149,42,.12); transform: translateY(-1px); }

.btn--ghost {
  background: rgba(255,255,255,.06);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { background: rgba(255,255,255,.1); color: var(--color-text); }

.btn--sm { min-height: 38px; padding: 0 var(--space-5); font-size: .8rem; border-radius: var(--radius-full); }
.btn--full { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ==============================
   PRODUCT CARD
   ============================== */
.product-card {
  background: var(--grad-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition-slow);
}
.product-card:hover {
  border-color: rgba(201,149,42,.35);
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(201,149,42,.15);
  transform: translateY(-4px);
}

.product-card__img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
.product-card__img--placeholder {
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
  background: radial-gradient(ellipse at center, var(--color-bg-warm) 0%, var(--color-bg-card) 100%);
}

.product-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  flex: 1; display: flex; flex-direction: column; gap: var(--space-2);
}

.product-card__name {
  font-weight: 600; font-size: .98rem; color: var(--color-text);
}
.product-card__desc {
  font-size: .82rem; color: var(--color-text-muted);
  flex: 1; line-height: 1.5;
}

.product-card__footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.product-card__price {
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700;
  color: var(--color-gold-light);
}
.product-card__weight {
  font-size: .75rem; color: var(--color-text-dim);
  margin-top: 1px;
}

/* Qty controls */
.product-card__qty { display: flex; align-items: center; gap: var(--space-2); }

.qty-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid rgba(201,149,42,.4);
  color: var(--color-gold-light);
  font-size: 1.15rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  background: transparent;
}
.qty-btn:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: #0F0908;
}
.qty-num {
  font-weight: 700; font-size: 1rem;
  min-width: 22px; text-align: center;
  color: var(--color-text);
}

/* ==============================
   PRODUCT GRID
   ============================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-5);
}

/* ==============================
   CATEGORY TABS
   ============================== */
.category-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.tab-btn {
  padding: 10px var(--space-5);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  min-height: 40px;
  transition: all var(--transition);
}
.tab-btn:hover { border-color: rgba(201,149,42,.4); color: var(--color-gold-light); }
.tab-btn.active {
  background: var(--grad-gold);
  border-color: transparent;
  color: #0F0908;
  box-shadow: var(--shadow-gold);
}

/* ==============================
   BADGE
   ============================== */
.badge {
  display: inline-flex; align-items: center;
  gap: 5px; padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.badge--new         { background: rgba(224,82,82,.15);  color: var(--color-status-new); }
.badge--in_progress { background: rgba(224,154,32,.15); color: var(--color-status-in-progress); }
.badge--ready       { background: rgba(76,175,118,.15); color: var(--color-status-ready); }
.badge--done        { background: rgba(100,100,100,.12); color: var(--color-status-done); }

/* ==============================
   FORM
   ============================== */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.form-label {
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted);
}

.form-input {
  height: 50px; padding: 0 var(--space-4);
  background: var(--color-bg-input);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: .95rem; font-family: var(--font-sans);
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}
.form-input::placeholder { color: var(--color-text-dim); }
.form-input:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201,149,42,.12);
}
.form-input.error { border-color: var(--color-status-new); }
textarea.form-input { height: auto; padding: var(--space-3) var(--space-4); resize: vertical; }

.form-error { color: var(--color-status-new); font-size: .8rem; }
.form-hint  { color: var(--color-text-dim); font-size: .8rem; }

/* ==============================
   TOAST
   ============================== */
.toast {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(0);
  background: rgba(30,20,16,.95);
  border: 1px solid var(--color-border-gold);
  color: var(--color-text);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: .88rem; z-index: 999;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease, toastOut .3s ease 1.8s forwards;
  pointer-events: none; white-space: nowrap;
}
@keyframes toastIn  { from { opacity:0; transform:translateX(-50%) translateY(12px);} to { opacity:1; transform:translateX(-50%) translateY(0);} }
@keyframes toastOut { to   { opacity:0; transform:translateX(-50%) translateY(12px);} }

/* ==============================
   EMPTY STATE
   ============================== */
.empty-state {
  text-align: center; padding: var(--space-16) var(--space-4);
  color: var(--color-text-dim);
}
.empty-state__icon { font-size: 3rem; margin-bottom: var(--space-4); opacity: .4; }
.empty-state p { font-size: .95rem; }