* { scroll-behavior: smooth; }

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

#site-header {
  background: transparent;
}
#site-header[data-scrolled="true"] {
  background: #ffffff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
#site-header[data-scrolled="true"] .nav-link,
#site-header[data-scrolled="true"] #mobile-menu-btn {
  color: #111;
}
#site-header[data-scrolled="false"] .nav-link {
  color: #fff;
}
#site-header[data-scrolled="false"] #mobile-menu-btn {
  color: #fff;
  background: rgba(255,255,255,0.15);
}

.category-chip {
  white-space: nowrap;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  border: 2px solid #eee;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.category-chip.active {
  background: #e7191f;
  border-color: #e7191f;
  color: #fff;
}

.product-card {
  border: 1px solid #eee;
  border-radius: 1.25rem;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.product-card:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
  transform: translateY(-3px);
}
.product-card .img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f3f3f3;
  position: relative;
}
.product-card img { width: 100%; height: 100%; object-fit: cover; }
.badge-special {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e7191f;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}
.badge-unavailable {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.order-type-option.selected {
  border-color: #e7191f;
  background: #fff5f5;
  color: #e7191f;
}

.promo-card {
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/10;
  background: #111;
}
.promo-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.75; }
.promo-card .promo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.1));
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.25rem;
  color: #fff;
}

/* POS specific */
.pos-btn {
  transition: all 0.1s;
}
.pos-btn:active {
  transform: scale(0.96);
}

@media (max-width: 767px) {
  .cart-drawer-mobile { width: 100% !important; }
}