/* ═══════════════════════════════════════════════════════════════
   ROBUSTA — Coffee Shop Digital Menu  v3.1
   Layout: Sticky top-nav + horizontal category bar (no sidebar)
   Font: Playfair Display · Figtree
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Figtree:wght@300;400;500;600&display=swap');

/* ─── Variables ─── */
:root {
  --rb-nav-bg:         #1A0B04;
  --rb-nav-text:       #C8A882;
  --rb-nav-dim:        rgba(200,168,130,0.40);
  --rb-nav-border:     rgba(200,168,130,0.12);
  --rb-nav-hover:      rgba(200,149,60,0.15);
  --rb-nav-active:     #E8B96A;
  --rb-nav-h:          64px;
  --rb-catbar-h:       52px;

  --rb-gold:           #C8953C;
  --rb-gold-light:     #E8B96A;
  --rb-gold-pale:      #F6E8C3;
  --rb-body-bg:        #FAF3E8;
  --rb-surface:        #FFFFFF;
  --rb-text:           #1C0D04;
  --rb-text-mid:       #5C3A1E;
  --rb-text-light:     #9B7050;
  --rb-border:         rgba(107,63,30,0.13);
  --rb-divider:        rgba(107,63,30,0.07);

  --primary-color:     #C8953C;

  --rb-radius:         16px;
  --rb-radius-sm:      10px;

  --rb-shadow-sm:  0 1px 4px rgba(61,32,16,.07), 0 2px 8px rgba(61,32,16,.05);
  --rb-shadow:     0 3px 12px rgba(61,32,16,.09), 0 6px 20px rgba(61,32,16,.06);
  --rb-shadow-md:  0 8px 28px rgba(61,32,16,.13), 0 16px 40px rgba(61,32,16,.07);

  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Figtree', system-ui, -apple-system, sans-serif;
  --rb-transition: 0.2s ease;
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--rb-body-bg);
  color: var(--rb-text);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ─── Sticky nav offset ─── */
.rb-sticky-offset { height: calc(var(--rb-nav-h) + var(--rb-catbar-h)); }

/* ══════════════════════════════════════════
   TOP NAVIGATION BAR
══════════════════════════════════════════ */
.rb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  height: var(--rb-nav-h);
  background: var(--rb-nav-bg);
  border-bottom: 1px solid var(--rb-nav-border);
  display: flex;
  align-items: center;
  padding: 0 40px;
  gap: 0;
}

/* Brand / Logo */
.rb-nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.rb-nav-logo-img {
  width: 40px; height: 40px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.rb-nav-logo-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--rb-gold) 0%, #8A5820 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(200,149,60,.35);
}
.rb-nav-brand-text {}
.rb-nav-brand-name {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: #FBF5EC;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.rb-nav-brand-sub {
  font-size: 10px;
  color: var(--rb-nav-dim);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* Spacer */
.rb-nav-spacer { flex: 1; }

/* Search (desktop inline) */
.rb-nav-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--rb-nav-border);
  border-radius: 50px;
  padding: 7px 16px;
  width: 230px;
  margin-right: 20px;
  transition: all var(--rb-transition);
}
.rb-nav-search:focus-within {
  background: rgba(255,255,255,0.10);
  border-color: rgba(200,149,60,.40);
  width: 270px;
}
.rb-nav-search i { color: var(--rb-nav-dim); font-size: 13px; flex-shrink: 0; }
.rb-nav-search input {
  background: none; border: none; outline: none;
  font-family: var(--font-body); font-size: 13.5px;
  color: var(--rb-nav-text); width: 100%;
}
.rb-nav-search input::placeholder { color: var(--rb-nav-dim); }

/* Actions */
.rb-nav-actions { display: flex; align-items: center; gap: 8px; }
.rb-nav-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 15px;
  border-radius: 50px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--rb-nav-border);
  color: var(--rb-nav-text);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--rb-transition);
  text-decoration: none;
}
.rb-nav-btn:hover { background: rgba(200,149,60,.15); color: var(--rb-gold-light); border-color: rgba(200,149,60,.3); }
.rb-nav-btn i { font-size: 13px; }
.rb-nav-btn-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--rb-nav-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--rb-nav-text); font-size: 14px;
  transition: all var(--rb-transition);
  text-decoration: none;
}
.rb-nav-btn-icon:hover { background: rgba(200,149,60,.15); color: var(--rb-gold-light); border-color: rgba(200,149,60,.3); }

/* Social links in nav */
.rb-nav-social { display: flex; align-items: center; gap: 4px; margin-left: 4px; }
.rb-nav-social a {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--rb-nav-dim); font-size: 13px;
  transition: color var(--rb-transition);
}
.rb-nav-social a:hover { color: var(--rb-gold-light); }

/* ══════════════════════════════════════════
   CATEGORY BAR (below nav, also sticky)
══════════════════════════════════════════ */
.rb-catbar {
  position: fixed;
  top: var(--rb-nav-h);
  left: 0; right: 0;
  z-index: 290;
  height: var(--rb-catbar-h);
  background: var(--rb-surface);
  border-bottom: 1px solid var(--rb-border);
  box-shadow: 0 2px 12px rgba(61,32,16,.06);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rb-catbar::-webkit-scrollbar { display: none; }
.rb-catbar-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 32px;
  height: 100%;
  width: max-content;
  min-width: 100%;
}
.rb-catbar-item {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 18px;
  border-radius: 50px;
  color: var(--rb-text-mid);
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all var(--rb-transition);
  text-decoration: none;
  flex-shrink: 0;
}
.rb-catbar-item i { font-size: 12px; }
.rb-catbar-item:hover { background: var(--rb-gold-pale); color: var(--rb-gold); border-color: rgba(200,149,60,.22); }
.rb-catbar-item.active {
  background: var(--rb-nav-bg);
  color: var(--rb-gold-light);
  border-color: transparent;
  font-weight: 600;
}

/* ══════════════════════════════════════════
   PAGE CONTENT
══════════════════════════════════════════ */
.rb-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 40px 60px;
}

/* ══════════════════════════════════════════
   HERO / CAMPAIGN
══════════════════════════════════════════ */
.rb-hero { margin-bottom: 48px; }

.rb-hero-card {
  position: relative;
  border-radius: var(--rb-radius);
  overflow: hidden;
  min-height: 320px;
  display: flex; align-items: flex-end;
  box-shadow: var(--rb-shadow-md);
}
.rb-hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform 8s ease;
}
.rb-hero-card:hover .rb-hero-bg { transform: scale(1.03); }
.rb-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    rgba(18,7,2,.90) 0%,
    rgba(18,7,2,.65) 45%,
    rgba(18,7,2,.10) 100%
  );
}
.rb-hero-body {
  position: relative; z-index: 1;
  padding: 48px 52px;
  max-width: 620px;
}
.rb-hero-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(200,149,60,.20);
  border: 1px solid rgba(200,149,60,.40);
  border-radius: 50px;
  padding: 5px 15px;
  color: var(--rb-gold-light);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  margin-bottom: 14px;
}
.rb-hero-title {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 700;
  color: #FBF5EC;
  line-height: 1.20;
  margin-bottom: 22px;
}
.rb-hero-title em { font-style: italic; color: var(--rb-gold-light); }
.rb-hero-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--rb-gold);
  color: #fff;
  padding: 12px 26px;
  border-radius: 50px;
  font-size: 14px; font-weight: 600;
  transition: all var(--rb-transition);
  box-shadow: 0 4px 18px rgba(200,149,60,.45);
}
.rb-hero-btn:hover { background: var(--rb-gold-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,149,60,.50); }

/* Carousel */
.rb-hero .carousel { border-radius: var(--rb-radius); overflow: hidden; box-shadow: var(--rb-shadow-md); }
.rb-hero .carousel-item { min-height: 320px; }
.rb-hero .carousel-indicators { bottom: 18px; }
.rb-hero .carousel-indicators button {
  width: 24px; height: 3px;
  border-radius: 2px;
  background: rgba(251,245,236,.45);
  border: none;
}
.rb-hero .carousel-indicators button.active { background: var(--rb-gold-light); width: 36px; }
.rb-hero .carousel-control-prev,
.rb-hero .carousel-control-next {
  width: 44px; height: 44px;
  background: rgba(26,11,4,.55);
  border-radius: 50%;
  top: 50%; transform: translateY(-50%);
  margin: 0 18px;
  opacity: 1;
}

/* ══════════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════════ */
.rb-section { margin-bottom: 52px; }
.rb-section-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 26px;
}
.rb-section-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 700;
  color: var(--rb-text);
}
.rb-section-title span {
  display: block;
  width: 32px; height: 3px;
  background: var(--rb-gold);
  border-radius: 2px;
  margin-top: 8px;
}
.rb-section-link {
  font-size: 13px; font-weight: 600;
  color: var(--rb-gold);
  display: flex; align-items: center; gap: 5px;
  padding-bottom: 3px;
}
.rb-section-link:hover { color: var(--rb-gold-light); }

/* ══════════════════════════════════════════
   CATEGORY GRID
══════════════════════════════════════════ */
.rb-cat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.rb-cat-card {
  position: relative;
  border-radius: var(--rb-radius-sm);
  overflow: hidden;
  aspect-ratio: 3/4;
  display: block;
  box-shadow: var(--rb-shadow-sm);
  transition: transform var(--rb-transition), box-shadow var(--rb-transition);
}
.rb-cat-card:hover { transform: translateY(-4px); box-shadow: var(--rb-shadow-md); }

.rb-cat-card-bg {
  position: absolute; inset: 0;
  background: var(--rb-text) center/cover no-repeat;
  transition: transform 0.5s ease;
}
.rb-cat-card:hover .rb-cat-card-bg { transform: scale(1.08); }
.rb-cat-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,7,2,.85) 0%, rgba(18,7,2,.20) 60%, transparent 100%);
}
.rb-cat-card-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #2A1507, #3D2010);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; color: rgba(200,149,60,.25);
}
.rb-cat-card-body {
  position: absolute; z-index: 1;
  bottom: 0; left: 0; right: 0;
  padding: 12px 14px 14px;
  text-align: center;
}
.rb-cat-card-icon {
  font-size: 18px;
  color: var(--rb-gold-light);
  margin-bottom: 6px;
  display: block;
}
.rb-cat-card-name {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: #FBF5EC;
  line-height: 1.2;
}

/* ══════════════════════════════════════════
   PRODUCT GRID & CARDS
══════════════════════════════════════════ */
.rb-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.rb-product-card {
  display: flex; flex-direction: column;
  background: var(--rb-surface);
  border-radius: var(--rb-radius);
  overflow: hidden;
  border: 1px solid var(--rb-border);
  box-shadow: var(--rb-shadow-sm);
  transition: transform var(--rb-transition), box-shadow var(--rb-transition);
  text-decoration: none;
}
.rb-product-card:hover { transform: translateY(-5px); box-shadow: var(--rb-shadow-md); }

.rb-product-card-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--rb-gold-pale);
  flex-shrink: 0;
}
.rb-product-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.rb-product-card:hover .rb-product-card-img img { transform: scale(1.07); }

.rb-product-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--rb-gold); color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 50px;
}
.rb-product-badge.sold { background: rgba(18,7,2,.65); backdrop-filter: blur(4px); }

.rb-product-card-body {
  flex: 1; display: flex; flex-direction: column;
  padding: 16px 18px 18px;
}
.rb-product-card-name {
  font-family: var(--font-display);
  font-size: 15.5px; font-weight: 600;
  color: var(--rb-text);
  line-height: 1.3; margin-bottom: 6px;
}
.rb-product-card-desc {
  font-size: 13px; color: var(--rb-text-light);
  line-height: 1.55; flex: 1; margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rb-product-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 13px;
  border-top: 1px solid var(--rb-divider);
}
.rb-product-price {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--rb-gold);
}
.rb-product-old-price {
  font-size: 12.5px; color: var(--rb-text-light);
  text-decoration: line-through; margin-right: 4px;
}
.rb-product-card-arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--rb-gold-pale);
  border: 1px solid rgba(200,149,60,.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--rb-gold); font-size: 12px;
  transition: all var(--rb-transition);
}
.rb-product-card:hover .rb-product-card-arrow {
  background: var(--rb-gold); color: #fff; border-color: var(--rb-gold);
}

/* ══════════════════════════════════════════
   CATEGORY PAGE HEADER
══════════════════════════════════════════ */
.rb-cat-header {
  position: relative;
  border-radius: var(--rb-radius);
  overflow: hidden;
  min-height: 200px;
  display: flex; align-items: flex-end;
  margin-bottom: 36px;
  box-shadow: var(--rb-shadow);
}
.rb-cat-header-bg {
  position: absolute; inset: 0;
  background: var(--rb-text) center/cover no-repeat;
}
.rb-cat-header-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(18,7,2,.85) 0%, rgba(18,7,2,.40) 55%, rgba(18,7,2,.10) 100%);
}
.rb-cat-header-body {
  position: relative; z-index: 1;
  padding: 32px 36px;
  width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.rb-cat-header-title {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 700;
  color: #FBF5EC; line-height: 1.15;
}
.rb-cat-header-count {
  font-size: 14px; color: rgba(251,245,236,.55);
  margin-top: 5px;
}
.rb-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50px;
  color: rgba(251,245,236,.88);
  font-size: 13px; font-weight: 500;
  backdrop-filter: blur(6px);
  transition: all var(--rb-transition);
  flex-shrink: 0;
  text-decoration: none;
}
.rb-back-btn:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ══════════════════════════════════════════
   SEARCH BAR
══════════════════════════════════════════ */
.rb-main-search { margin-bottom: 28px; }
.rb-m-search {
  display: flex; align-items: center; gap: 12px;
  background: var(--rb-surface);
  border: 1.5px solid var(--rb-border);
  border-radius: var(--rb-radius-sm);
  padding: 13px 20px;
  box-shadow: var(--rb-shadow-sm);
  max-width: 520px;
  transition: border-color var(--rb-transition), box-shadow var(--rb-transition);
}
.rb-m-search:focus-within {
  border-color: var(--rb-gold);
  box-shadow: 0 0 0 3px rgba(200,149,60,.12);
  max-width: 100%;
}
.rb-m-search i { color: var(--rb-gold); font-size: 15px; flex-shrink: 0; }
.rb-m-search input {
  flex: 1; background: none; border: none; outline: none;
  font-family: var(--font-body); font-size: 14.5px; color: var(--rb-text);
}
.rb-m-search input::placeholder { color: var(--rb-text-light); }

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
.rb-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 72px 24px; color: var(--rb-text-light); text-align: center;
}
.rb-empty i { font-size: 44px; color: var(--rb-gold-pale); margin-bottom: 16px; }

/* ══════════════════════════════════════════
   PRODUCT DETAIL
══════════════════════════════════════════ */
.rb-detail-nav { margin-bottom: 26px; }

.rb-detail-card {
  display: grid;
  grid-template-columns: 480px 1fr;
  margin-bottom: 60px;
  background: var(--rb-surface);
  border-radius: var(--rb-radius);
  border: 1px solid var(--rb-border);
  box-shadow: var(--rb-shadow);
  overflow: hidden;
}
.rb-detail-img-wrap {
  overflow: hidden;
  background: var(--rb-gold-pale);
  min-height: 420px;
  position: relative;
}
.rb-detail-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.rb-detail-img-placeholder {
  width: 100%; height: 100%; min-height: 420px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rb-gold-pale);
}
.rb-detail-img-placeholder img { width: 80px; opacity: .30; }

.rb-detail-info {
  padding: 44px 44px 44px 40px;
  display: flex; flex-direction: column;
}
.rb-detail-cat {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rb-gold); margin-bottom: 12px;
}
.rb-detail-name {
  font-family: var(--font-display);
  font-size: 34px; font-weight: 700;
  color: var(--rb-text); line-height: 1.18;
  margin-bottom: 18px;
}
.rb-detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.rb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 50px;
  font-size: 12px; font-weight: 600;
}
.rb-badge-cat    { background: rgba(200,149,60,.10); color: var(--rb-gold); border: 1px solid rgba(200,149,60,.20); }
.rb-badge-stock  { background: #EDF8F2; color: #2A7550; border: 1px solid #BBE8D2; }
.rb-badge-nostock{ background: #FEF2F2; color: #C23B3B; border: 1px solid #FAD0D0; }
.rb-badge-warn   { background: #FFF9EC; color: #926A10; border: 1px solid #FFE5A0; }
.rb-badge-feat   { background: rgba(200,149,60,.10); color: var(--rb-gold); border: 1px solid rgba(200,149,60,.20); }

.rb-detail-price-block {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 28px;
}
.rb-detail-price {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 700; color: var(--rb-gold);
}
.rb-detail-old-price {
  font-size: 20px; color: var(--rb-text-light);
  text-decoration: line-through;
}
.rb-detail-discount-badge {
  background: var(--rb-gold); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 50px;
  text-transform: uppercase; letter-spacing: .06em;
}
.rb-detail-divider { border: none; border-top: 1px solid var(--rb-divider); margin: 0 0 22px; }
.rb-detail-desc {
  font-size: 15px; color: var(--rb-text-mid);
  line-height: 1.80; flex: 1;
}

/* Related */
.rb-related-hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rb-divider);
}
.rb-related-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700; color: var(--rb-text);
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.rb-footer {
  background: var(--rb-nav-bg);
  border-top: 1px solid var(--rb-nav-border);
  padding: 24px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.rb-footer-brand {
  display: flex; align-items: center; gap: 10px;
}
.rb-footer-brand-name {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600;
  color: rgba(251,245,236,.75);
}
.rb-footer-copy { font-size: 12.5px; color: var(--rb-nav-dim); margin-top: 2px; }
.rb-footer-links { display: flex; align-items: center; gap: 20px; }
.rb-footer-links a {
  font-size: 13px; color: var(--rb-nav-dim);
  display: flex; align-items: center; gap: 6px;
  transition: color var(--rb-transition);
}
.rb-footer-links a:hover { color: var(--rb-gold-light); }

/* ══════════════════════════════════════════
   WAITER BUTTON & TOAST
══════════════════════════════════════════ */
.rb-waiter-btn {
  position: fixed; bottom: 28px; right: 28px;
  display: flex; align-items: center; gap: 9px;
  background: var(--rb-nav-bg);
  border: 1px solid rgba(200,149,60,.35);
  color: var(--rb-gold-light);
  padding: 13px 22px; border-radius: 50px;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 28px rgba(18,7,2,.40);
  z-index: 400; transition: all var(--rb-transition);
  text-decoration: none;
}
.rb-waiter-btn:hover { background: var(--rb-gold); color: #fff; border-color: var(--rb-gold); transform: translateY(-2px); }
.rb-waiter-btn i { font-size: 15px; }

.rb-toast {
  position: fixed; bottom: 90px; right: 28px;
  background: #1E0E05; border: 1px solid rgba(200,149,60,.28);
  color: var(--rb-gold-light);
  padding: 12px 20px; border-radius: 10px;
  font-size: 13.5px; font-weight: 500; z-index: 401;
  display: flex; align-items: center; gap: 9px;
  box-shadow: var(--rb-shadow-md);
}
.rb-toast i { color: #52C27A; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 1280px) {
  .rb-page { padding: 36px 32px 56px; }
  .rb-cat-grid { grid-template-columns: repeat(4, 1fr); }
  .rb-product-grid { grid-template-columns: repeat(3, 1fr); }
  .rb-detail-card { grid-template-columns: 400px 1fr; }
}

@media (max-width: 1024px) {
  .rb-nav { padding: 0 24px; }
  .rb-nav-search { width: 180px; }
  .rb-nav-search:focus-within { width: 220px; }
  .rb-catbar-inner { padding: 0 20px; }
  .rb-page { padding: 30px 24px 50px; }
  .rb-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .rb-product-grid { grid-template-columns: repeat(2, 1fr); }
  .rb-detail-card { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  /* Collapse search in nav on mobile */
  .rb-nav-search { display: none; }
  .rb-nav { padding: 0 16px; }
  .rb-nav-brand-sub { display: none; }
  .rb-catbar-inner { padding: 0 14px; }

  .rb-page { padding: 22px 16px 44px; }

  .rb-hero-card { min-height: 240px; }
  .rb-hero-body { padding: 28px 24px; }
  .rb-hero-title { font-size: 24px; }

  .rb-cat-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .rb-cat-card { aspect-ratio: 3/4; }

  /* Products — horizontal card on mobile */
  .rb-product-grid { grid-template-columns: 1fr; gap: 10px; }
  .rb-product-card { flex-direction: row; }
  .rb-product-card-img {
    width: 36%; aspect-ratio: auto;
    min-height: 120px; flex-shrink: 0;
  }
  .rb-product-card-body { padding: 13px 15px 14px; }
  .rb-product-card-name { font-size: 14.5px; }
  .rb-product-card:hover { transform: none; box-shadow: var(--rb-shadow-md); }

  /* Detail */
  .rb-detail-card { grid-template-columns: 1fr; }
  .rb-detail-img-wrap { min-height: 280px; max-height: 320px; }
  .rb-detail-info { padding: 24px 20px 28px; }
  .rb-detail-name { font-size: 26px; }
  .rb-detail-price { font-size: 28px; }

  .rb-cat-header-title { font-size: 26px; }
  .rb-cat-header-body { padding: 22px 20px; }

  .rb-footer { padding: 18px 16px; flex-direction: column; gap: 12px; text-align: center; }
  .rb-footer-links { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 540px) {
  .rb-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .rb-product-card-img { width: 34%; min-height: 108px; }
  .rb-hero-title { font-size: 20px; }
  .rb-hero-body { padding: 22px 18px; }
  .rb-cat-header-title { font-size: 22px; }
  .rb-detail-name { font-size: 22px; }
  .rb-nav-brand-name { font-size: 15px; }
}