:root {
  --black: #fff8f1;
  --panel: #ffffff;
  --orange: #ee6a24;
  --orange2: #d95716;
  --cream: #2d211b;
  --muted: #7d6e65;
  --line: rgba(238, 106, 36, 0.2);
}

body, main, #menu { background: #fff8f1; color: #2d211b; }

.topbar, .menu-controls, .section-toolbar {
  background: rgba(255, 248, 241, 0.96);
  border-bottom-color: rgba(238, 106, 36, 0.14);
}
.topbar-inner { height: 158px; }
.mini-brand {
  display: grid; place-items: center; padding: 7px;
  border: 2px solid rgba(238, 106, 36, 0.45); border-radius: 50%; background: #fff;
  box-shadow: 0 12px 28px rgba(117, 64, 29, 0.16), 0 0 0 7px rgba(238, 106, 36, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.mini-brand:hover { transform: translateY(-3px) scale(1.02); }
.brand-logo { width: 120px; height: 120px; }

.search, .cat-btn {
  background: #fff; border-color: rgba(79, 48, 31, .14); color: #5f5048;
  box-shadow: 0 5px 18px rgba(91, 52, 28, .05);
}
.search input { color: #2d211b; }
.search input::placeholder, .category-home-head small { color: #887970; }
.search span, .eyebrow { color: var(--orange); }
.category-home-head h2, .section-toolbar > span, .section-title, .item-name,
.cart-panel h2, .cart-total, .order-form label > span, .order-type-field legend { color: #2d211b; }

.category-card, .category-card:hover {
  background: #fff !important; border-color: rgba(238, 106, 36, .2);
  box-shadow: 0 9px 25px rgba(91, 52, 28, .1);
}
.category-card:hover { border-color: rgba(238, 106, 36, .58); }
.category-photo { filter: saturate(.86) brightness(.98) contrast(.96); }
.category-card:hover .category-photo { filter: saturate(.98) brightness(1) contrast(.98); }
.category-shade { background: linear-gradient(180deg, rgba(31,18,10,.02) 28%, rgba(31,18,10,.92) 100%); }
.category-copy { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 3px; }
.category-copy b { color: #fff !important; font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,.82); }
.category-copy small {
  position: static; display: block; margin: 0; color: #fff2e8; font-size: 10px; line-height: 1.5;
  text-shadow: 0 2px 8px rgba(0,0,0,.65);
}

/* One predictable row per item: image, detail, action. */
.menu-grid { grid-template-columns: 1fr; gap: 0; overflow: visible; background: transparent; box-shadow: none; }
.menu-item, .menu-item:hover, .offer-item {
  position: relative; display: grid !important; grid-template-columns: 170px minmax(0, 1fr);
  min-height: 160px; padding: 0 !important; border: 0; border-radius: 0;
  background: transparent; box-shadow: none !important; transform: none;
}
.menu-item::before { display: none; }
.menu-item:not(:last-child)::after {
  content: ''; position: absolute; right: 170px; bottom: 0; left: 140px; height: 1px;
  background: rgba(113, 72, 46, .14);
}
.item-photo {
  align-self: center; width: 142px; height: 130px; margin: 15px 14px; border-radius: 14px;
  background: #f1e4da; object-fit: cover; transform: translateY(5px);
}
.item-info, .has-variants .item-info, .menu-item:not(.has-variants) .item-info {
  position: static; display: block !important; min-height: 160px; padding: 42px 22px 20px 144px !important;
}
.item-name { display: block; font-size: 17px; line-height: 1.55; }
.item-detail { max-width: 100%; color: #7d6e65; }
.item-price { display: block; margin-top: 7px; color: #d95716; font-size: 13px; }

.add-btn, .show-variants[aria-expanded='false'] {
  position: absolute; inset-inline-start: auto; inset-inline-end: 14px; top: 50%; bottom: auto;
  display: inline-flex; align-items: center; justify-content: center; width: 120px !important;
  min-width: 120px !important; min-height: 36px !important; padding: 0 10px !important; border: 0;
  border-radius: 11px; background: linear-gradient(135deg, #ff7a32, #ec5817); color: #fff;
  box-shadow: 0 8px 18px rgba(238,106,36,.23); font-size: 10px !important; font-weight: 900;
  text-align: center; transform: translateY(-50%);
}
.add-btn span, .show-variants[aria-expanded='false'] span { width: 100%; text-align: center; }
.add-btn i, .show-variants[aria-expanded='false'] i {
  position: absolute; inset-inline-start: 10px; display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; font-size: 14px; font-style: normal; line-height: 1;
}
.show-variants[aria-expanded='false'] i::before { width: auto; height: auto; border: 0; content: '+'; transform: none; }
.add-btn:hover, .show-variants[aria-expanded='false']:hover {
  transform: translateY(calc(-50% - 2px)); box-shadow: 0 12px 24px rgba(238,106,36,.32);
}
.show-variants[aria-expanded='true'] {
  position: static; width: 100%; min-height: 38px; margin-top: 12px; border: 1px solid rgba(238,106,36,.24);
  border-radius: 10px; background: rgba(238,106,36,.08); color: #d95716; box-shadow: none; transform: none;
}
.variant-options { margin-top: 10px; }
.menu-item.variants-collapsed { padding-bottom: 0 !important; }

.back-categories { background: rgba(238,106,36,.09); border-color: rgba(238,106,36,.28); color: #d95716; }
.cart-panel, .order-form input, .order-option { background: #fff; border-color: rgba(79,48,31,.12); color: #2d211b; }
footer { background: #fff1e5; color: #67564c; border-top-color: rgba(238,106,36,.13); }

.search-result-enter { animation: search-result-enter 360ms cubic-bezier(.22,1,.36,1) both; }
@keyframes search-result-enter { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 650px) {
  .topbar-inner { height: 126px; }
  .mini-brand { padding: 5px; }
  .brand-logo { width: 92px; height: 92px; }
  .menu-item, .menu-item:hover, .offer-item { grid-template-columns: 100px minmax(0,1fr); min-height: 118px; }
  .item-photo { width: 82px; height: 94px; margin: 12px 9px; border-radius: 12px; transform: translateY(3px); }
  .item-info, .has-variants .item-info, .menu-item:not(.has-variants) .item-info {
    min-height: 118px; padding: 28px 10px 12px 116px !important;
  }
  .item-name { font-size: 13px; }
  .item-price { margin-top: 5px; font-size: 10px; }
  .add-btn, .show-variants[aria-expanded='false'] {
    inset-inline-end: 8px; width: 104px !important; min-width: 104px !important; min-height: 40px !important; font-size: 9px !important;
  }
  .menu-item:not(:last-child)::after { right: 100px; left: 114px; }
}

@media (prefers-reduced-motion: reduce) {
  .mini-brand, .search-result-enter { animation: none; transition: none; }
}
