:root{
  --bg:#fbf5ee;
  --ink:#1b130d;
  --muted:#6c5f55;

  --caramel:#c89b63;
  --coffee:#7a4f2a;
  --cream:#fff6ec;

  --glass: rgba(255,255,255,.86);
  --stroke: rgba(0,0,0,.07);
  --shadow: 0 20px 70px rgba(0,0,0,.12);

  --hot: linear-gradient(135deg,#ff3b30,#ff9500);
  --dark: linear-gradient(135deg,#0f0f12,#34343b);
  --neon: linear-gradient(135deg, rgba(200,155,99,.95), rgba(255,149,0,.75));
}

/* Base */
*{ font-family:"Cairo", system-ui, -apple-system, Segoe UI, sans-serif; }
html{ scroll-behavior:smooth; }
body{
  color: var(--ink);
  background:
    radial-gradient(1200px 620px at 85% -10%, rgba(255,217,168,.95) 0%, transparent 55%),
    radial-gradient(900px 620px at 10% 10%, rgba(215,181,154,.95) 0%, transparent 55%),
    radial-gradient(900px 520px at 30% 120%, rgba(200,155,99,.35) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg), #fff);
  overflow-x:hidden;
}

a{ text-decoration:none; color:inherit; }
::selection{ background: rgba(200,155,99,.35); }

/* Subtle animated glow */
@media (prefers-reduced-motion: no-preference){
  body::before,
  body::after{
    content:"";
    position:fixed;
    z-index:-1;
    width:520px; height:520px;
    border-radius:50%;
    filter: blur(50px);
    opacity:.55;
    pointer-events:none;
    mix-blend-mode:multiply;
    animation: floaty 10s ease-in-out infinite;
  }
  body::before{
    top:-180px; right:-180px;
    background: rgba(200,155,99,.55);
  }
  body::after{
    bottom:-220px; left:-220px;
    background: rgba(255,149,0,.35);
    animation-delay:-3s;
  }
  @keyframes floaty{
    0%,100%{ transform: translate3d(0,0,0) scale(1); }
    50%{ transform: translate3d(0,22px,0) scale(1.05); }
  }
}

/* Nav */
.hub-nav{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.fw-black{ font-weight: 900; }
.hub-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 8px 12px;
  border-radius:999px;
  background: rgba(200,155,99,.22);
  font-weight: 900;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Hero */
.hero-wrap{ padding: 38px 0 16px; }
.hero{
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.66)),
    radial-gradient(900px 500px at 80% 20%, rgba(200,155,99,.22), transparent 60%);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.hero::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(1200px 500px at 50% 0%, rgba(255,149,0,.10), transparent 60%);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  width:260px; height:260px; border-radius:50%;
  right:-90px; top:-90px;
  background: rgba(200,155,99,.18);
  filter: blur(2px);
}

/* Steam icon effect */
.steam{
  position:absolute; left:26px; top:18px;
  width:120px; height:120px;
  opacity:.35;
  pointer-events:none;
}
.steam span{
  position:absolute;
  width:18px; height:60px;
  border-radius:999px;
  background: rgba(0,0,0,.10);
  filter: blur(0.2px);
}
@media (prefers-reduced-motion: no-preference){
  .steam span{
    animation: steam 2.9s ease-in-out infinite;
  }
  .steam span:nth-child(2){ left:30px; height:66px; animation-delay:-.7s; }
  .steam span:nth-child(3){ left:60px; height:56px; animation-delay:-1.2s; }
  @keyframes steam{
    0%{ transform: translateY(10px) scaleX(.9); opacity:.15; }
    50%{ transform: translateY(-10px) scaleX(1); opacity:.32; }
    100%{ transform: translateY(10px) scaleX(.9); opacity:.15; }
  }
}

.hero-badge{
  display:inline-flex; gap:10px; align-items:center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(200,155,99,.22);
  color: var(--ink);
  font-weight: 900;
}

.kicker{
  background: rgba(0,0,0,.05);
  border: 1px solid var(--stroke);
  border-radius: 16px;
}

/* Chips */
.chips-scroll{
  display:flex; gap:10px;
  overflow-x:auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
}
.chips-scroll::-webkit-scrollbar{ height:6px; }
.chips-scroll::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius:999px; }

.chip{
  scroll-snap-align: start;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--stroke);
  padding: 10px 14px;
  transition: .18s;
  display:inline-flex; gap:8px; align-items:center;
  white-space:nowrap;
  position: relative;
}
.chip::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:999px;
  padding:1px;
  background: linear-gradient(135deg, rgba(200,155,99,.45), rgba(255,149,0,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.0;
  transition:.18s;
}
.chip:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.chip:hover::before{ opacity:1; }
.chip.active{
  background:#111;
  color:#fff;
  border-color:#111;
}
@media (prefers-reduced-motion: no-preference){
  .chip.active{
    box-shadow: 0 0 0 10px rgba(200,155,99,.12), 0 18px 40px rgba(0,0,0,.12);
  }
}

/* Section titles */
.section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 22px;
}
.section-title h3{
  margin:0;
  font-weight: 950;
  letter-spacing:.2px;
}

/* Cards */
.cardx{
  border: 1px solid var(--stroke);
  border-radius: 18px;
  background: var(--glass);
  overflow: hidden;
  box-shadow: 0 16px 46px rgba(0,0,0,.07);
  transition: .18s;
  position: relative;
}

.cardx:hover{ transform: translateY(-2px); box-shadow: 0 26px 80px rgba(0,0,0,.14); }

.cardx::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.30) 35%, transparent 65%);
  transform: translateX(-120%);
  pointer-events:none;
  opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .cardx:hover::before{
    opacity:1;
    animation: shimmer .85s ease-out forwards;
  }
  @keyframes shimmer{
    to{ transform: translateX(120%); }
  }
}

.card-img{
  height: 210px;
  width: 100%;
  object-fit: cover;
  background: rgba(255,255,255,.55);
}
.img-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.00) 58%, rgba(0,0,0,.12) 100%);
}

.ribbon{
  position:absolute; top:14px; left:14px;
  background: var(--hot);
  color:#fff;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: .85rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.ribbon.dark{
  left:auto; right:14px;
  background: var(--dark);
}
.badge-ingredient{
  background: rgba(200,155,99,.22);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.06);
  font-weight: 900;
  border-radius: 999px;
}

.price-new{
  font-weight: 950;
  font-size: 1.45rem;
  color: #111;
  line-height: 1;
}

/* Old price with X */
.old-price-x{
  position: relative;
  display: inline-block;
  color: #b00020;
  font-weight: 950;
  opacity: .86;
  padding: 0 10px;
}
.old-price-x::before,
.old-price-x::after{
  content:"";
  position:absolute;
  top:50%;
  left:-4px; right:-4px;
  height:2px;
  background:#ff2d2d;
  transform-origin:center;
}
.old-price-x::before{ transform: translateY(-50%) rotate(14deg); }
.old-price-x::after { transform: translateY(-50%) rotate(-14deg); }

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

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

/* Reveal animations */
.reveal{
  opacity:0;
  transform: translateY(14px);
}
.reveal.in{
  opacity:1;
  transform: translateY(0);
  transition: opacity .45s ease, transform .45s ease;
}

/* Buttons */
.btn-dark{
  background: linear-gradient(135deg, #111, #333);
  border-color: #111;
}
.btn-dark:hover{ filter: brightness(1.05); }

.btn-outline-dark.active{
  background: rgba(0,0,0,.86);
  color:#fff;
}

/* Mobile tuning */
@media (max-width: 576px){
  .hero-wrap{ padding-top: 22px; }
  .card-img{ height: 190px; }
  .price-new{ font-size: 1.30rem; }
  .ribbon{ font-size: .82rem; }
}

/* ====== Magical FX Layer ====== */
.fx-canvas{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .65;
}
.hero, .container, .cardx, .modal-content{ position: relative; z-index: 1; }

body::before{
  content:"";
  position: fixed;
  inset:-50px;
  background:
    radial-gradient(900px 520px at 80% 10%, rgba(255,209,140,.55), transparent 60%),
    radial-gradient(700px 520px at 10% 20%, rgba(200,155,99,.40), transparent 58%),
    radial-gradient(820px 520px at 70% 80%, rgba(255,59,48,.18), transparent 60%);
  filter: blur(12px);
  opacity: .75;
  pointer-events:none;
  z-index: 0;
  animation: floatbg 10s ease-in-out infinite;
}
@keyframes floatbg{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-14px,0); }
}

/* neon outline hover */
.cardx{
  will-change: transform;
}
.cardx:hover{
  box-shadow:
    0 24px 90px rgba(0,0,0,.14),
    0 0 0 1px rgba(200,155,99,.16),
    0 0 40px rgba(200,155,99,.18);
}

/* gentle 3D tilt (JS) */
.cardx.tilt{
  transform-style: preserve-3d;
}
.cardx.tilt .p-3, .cardx.tilt .p-4{ transform: translateZ(14px); }

/* shimmering badge */
.hero-badge{
  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,.35) 40%, rgba(255,255,255,0) 55%);
  transform: translateX(-120%);
  animation: shimmer 3.2s ease-in-out infinite;
  opacity: .65;
}
@keyframes shimmer{
  0%{ transform: translateX(-120%); }
  45%{ transform: translateX(120%); }
  100%{ transform: translateX(120%); }
}

/* offcanvas nav style */
.offcanvas{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
}
.offcanvas .navlink{
  display:flex; align-items:center; gap:10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font-weight: 900;
  margin-bottom: 10px;
}
.offcanvas .navlink:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.10); }
.offcanvas .hr{ height:1px; background: rgba(0,0,0,.08); margin: 14px 0; }

.hub-menu-btn{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.72);
}

.offcanvas-detail{height:min(86vh,820px);} .d-img{max-height:300px;object-fit:cover;}


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