:root{
  --ink:#fff7ef;
  --muted: rgba(255,247,239,.72);
  --stroke: rgba(255,255,255,.10);
  --glass: rgba(20,14,10,.55);
  --amber:#ffb648;
  --orange:#ff6a3d;
  --red:#ff3b30;
  --shadow: 0 26px 110px rgba(0,0,0,.55);
}

*{ font-family:"Cairo", system-ui, -apple-system, Segoe UI, sans-serif; }
body{
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 75% -10%, rgba(255,182,72,.28), transparent 60%),
    radial-gradient(900px 520px at 10% 10%, rgba(255,106,61,.22), transparent 55%),
    radial-gradient(900px 620px at 70% 80%, rgba(255,59,48,.18), transparent 60%),
    linear-gradient(180deg, #0c0907, #120b08 40%, #0b0a0a 100%);
  overflow-x:hidden;
}

a{ text-decoration:none; }
.hub-nav{
  background: rgba(10,8,7,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hub-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255,182,72,.14);
  border: 1px solid rgba(255,182,72,.20);
  font-weight: 900;
}

.hero-wrap{ padding: 34px 0 12px; }
.hero{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 500px at 70% 10%, rgba(255,182,72,.18), transparent 60%),
    radial-gradient(820px 520px at 10% 40%, rgba(255,106,61,.16), transparent 60%),
    rgba(20,14,10,.55);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:-40px;
  background: conic-gradient(from 180deg, rgba(255,182,72,0), rgba(255,182,72,.22), rgba(255,106,61,.18), rgba(255,59,48,.16), rgba(255,182,72,0));
  opacity:.45;
  filter: blur(18px);
  animation: spin 16s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--ink);
  font-weight: 900;
  position: relative;
  overflow:hidden;
}
.hero-badge::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 40%, rgba(255,255,255,0) 55%);
  transform: translateX(-120%);
  animation: shimmer 3.3s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ transform: translateX(-120%); }
  50%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}

.kicker{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
}

.btn-dark{
  background: linear-gradient(135deg, var(--amber), var(--orange));
  border: none;
  color: #1b130d;
  font-weight: 950;
}
.btn-outline-dark{
  color: var(--ink);
  border-color: rgba(255,255,255,.18);
}
.btn-outline-dark:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  color: var(--ink);
}

.chips-scroll{
  display:flex; gap:10px; overflow-x:auto; padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.chip{
  scroll-snap-align: start;
  white-space: nowrap;
  display:inline-flex; gap:8px; align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  font-weight: 900;
  transition:.18s;
}
.chip:hover{ transform: translateY(-1px); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.chip.active{ background: linear-gradient(135deg, rgba(255,182,72,.25), rgba(255,106,61,.20)); }

.section-title h3{ margin:0; font-weight: 950; }

.cardx{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20,14,10,.55);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
  overflow:hidden;
  transition:.18s;
}
.cardx:hover{
  transform: translateY(-2px);
  box-shadow:
    0 28px 100px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,182,72,.18),
    0 0 44px rgba(255,182,72,.12);
}
.card-img{ height: 210px; width:100%; object-fit: cover; background: rgba(255,255,255,.06); }
.img-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 58%, rgba(0,0,0,.35) 100%);
}
.badge-ingredient{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--ink);
  font-weight: 900;
  border-radius: 999px;
}
.price-new{ font-weight: 950; font-size: 1.35rem; }

.old-price-x{
  position: relative;
  display: inline-block;
  color: #ff4d4d;
  font-weight: 900;
  opacity: .90;
  padding: 0 10px;
}
.old-price-x::before,
.old-price-x::after{
  content:"";
  position:absolute;
  top:50%;
  left:-4px; right:-4px;
  height:2px;
  background:#ff2d2d;
}
.old-price-x::before{ transform: translateY(-50%) rotate(14deg); }
.old-price-x::after { transform: translateY(-50%) rotate(-14deg); }

.ribbon{
  position:absolute; top:14px; left:14px;
  background: linear-gradient(135deg, #ff3b30, #ffb648);
  color:#150d09;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: .85rem;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.ribbon.dark{
  left:auto; right:14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--ink);
}

.allergen{
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  font-weight: 800;
  font-size: .85rem;
}

.combo-row{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: 12px;
  overflow-x:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.combo-row > .cardx{ scroll-snap-align: start; }

.offcanvas-detail{
  height: min(86vh, 820px);
  background: rgba(10,8,7,.74);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,.10);
  color: var(--ink);
}
.offcanvas-detail .offcanvas-header{ border-bottom: 1px solid rgba(255,255,255,.10); }
.offcanvas-detail .btn-close{ filter: invert(1); opacity: .9; }
.d-img{ max-height: 300px; object-fit: cover; background: rgba(255,255,255,.06); }

/* particles canvas from cafe-fx */
.fx-canvas{ position: fixed; inset:0; pointer-events:none; z-index:0; opacity:.60; }
.hero, .container, .cardx{ position: relative; z-index: 1; }

@media (max-width:576px){ .card-img{ height: 190px; } }


/* ===== Details panel placement (Desktop: right, Mobile: bottom) ===== */
.offcanvas-detail-end{
  width: min(520px, 92vw);
}
.offcanvas-detail-bottom{
  height: min(86vh, 820px);
}