:root {
  --coffee-1: #1a120f;
  --coffee-2: #2a1b16;
  --coffee-3: #3b241d;
  --coffee-4: #5d4033;
  --gold: #d2a45e;
  --gold-soft: #f0d6ab;
  --text: #f7f1eb;
  --muted: rgba(255,255,255,0.74);
  --shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
  --shadow-heavy: 0 28px 70px rgba(0, 0, 0, 0.34);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden}
body{
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(210,164,94,0.08), transparent 20%),
    radial-gradient(circle at bottom right, rgba(255,255,255,0.04), transparent 18%),
    linear-gradient(180deg, #130d0b 0%, #241712 28%, #3b241d 62%, #2a1b16 100%);
  min-height:100vh;
}
img{width:100%;display:block}

/* stars */
.stars{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.stars span{
  position:absolute;top:-10%;border-radius:50%;
  background:rgba(255,255,255,0.94);
  box-shadow:0 0 6px rgba(255,255,255,0.9),0 0 12px rgba(255,255,255,0.45);
  animation:starMove linear infinite;opacity:.95
}
.stars span:nth-child(1){left:4%;animation-duration:10s;width:4px;height:4px}
.stars span:nth-child(2){left:10%;animation-duration:13s;animation-delay:1s;width:6px;height:6px}
.stars span:nth-child(3){left:16%;animation-duration:11s;animation-delay:2s;width:5px;height:5px}
.stars span:nth-child(4){left:22%;animation-duration:14s;animation-delay:.5s;width:7px;height:7px}
.stars span:nth-child(5){left:29%;animation-duration:12s;animation-delay:1.5s;width:5px;height:5px}
.stars span:nth-child(6){left:36%;animation-duration:15s;animation-delay:2.5s;width:6px;height:6px}
.stars span:nth-child(7){left:43%;animation-duration:11s;animation-delay:.7s;width:4px;height:4px}
.stars span:nth-child(8){left:51%;animation-duration:14s;animation-delay:1.7s;width:6px;height:6px}
.stars span:nth-child(9){left:58%;animation-duration:10s;animation-delay:2.4s;width:5px;height:5px}
.stars span:nth-child(10){left:65%;animation-duration:13s;animation-delay:1.1s;width:6px;height:6px}
.stars span:nth-child(11){left:72%;animation-duration:12s;animation-delay:.4s;width:5px;height:5px}
.stars span:nth-child(12){left:78%;animation-duration:16s;animation-delay:2.2s;width:7px;height:7px}
.stars span:nth-child(13){left:84%;animation-duration:11s;animation-delay:.8s;width:4px;height:4px}
.stars span:nth-child(14){left:89%;animation-duration:14s;animation-delay:1.6s;width:6px;height:6px}
.stars span:nth-child(15){left:94%;animation-duration:15s;animation-delay:2.8s;width:5px;height:5px}
.stars span:nth-child(16){left:8%;animation-duration:17s;animation-delay:3s;width:3px;height:3px}
.stars span:nth-child(17){left:33%;animation-duration:16s;animation-delay:3.4s;width:4px;height:4px}
.stars span:nth-child(18){left:55%;animation-duration:18s;animation-delay:3.8s;width:3px;height:3px}
.stars span:nth-child(19){left:74%;animation-duration:17s;animation-delay:4.2s;width:4px;height:4px}
.stars span:nth-child(20){left:92%;animation-duration:19s;animation-delay:4.6s;width:3px;height:3px}
@keyframes starMove{
  0%{transform:translateY(-12vh) translateX(0) scale(.9);opacity:0}
  10%{opacity:.95}
  100%{transform:translateY(110vh) translateX(24px) scale(1.02);opacity:.18}
}

/* navbar */
.topbar{
  width:min(1200px, calc(100% - 32px));margin:18px auto;padding:14px 18px;border-radius:24px;
  background:rgba(255,255,255,.06);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:16px;
  position:sticky;top:16px;z-index:50
}
.brand-wrap{display:flex;align-items:center;gap:12px}
.logo{
  width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--coffee-3),var(--coffee-4));
  color:#fff;display:grid;place-items:center;font-weight:700;box-shadow:0 10px 20px rgba(0,0,0,.18)
}
.brand-name{font-family:'Playfair Display',serif;font-size:1.15rem}
.brand-tag{font-size:.78rem;opacity:.72}
#nav-toggle{display:none}
.hamburger{display:none}
.navbar{display:flex;flex-wrap:wrap;gap:10px}
.navbar a{text-decoration:none;color:var(--text);padding:10px 14px;border-radius:999px;transition:.3s ease}
.navbar a:hover,.navbar a.active{background:rgba(255,255,255,.14);color:#fff;transform:translateY(-2px)}

.menu-page{width:min(1200px, calc(100% - 32px));margin:0 auto 24px;position:relative;z-index:2}
.section-title{margin-bottom:28px}
.section-title.left{text-align:left}
.section-title p{color:var(--gold);letter-spacing:3px;font-size:.82rem;margin-bottom:8px}
.section-title h2{font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3rem)}

/* hero */
.menu-hero{
  position:relative;overflow:hidden;min-height:88vh;margin-top:8px;border-radius:34px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;padding:54px 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(135deg, #1a120f, #2f1f19 55%, #3d281f);
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-heavy)
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(210,164,94,.12), transparent 24%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.06), transparent 22%);
}
.hero-grid{
  position:absolute;inset:0;opacity:.05;
  background-image:
    linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size:24px 24px
}
.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.22;animation:floatGlow 8s ease-in-out infinite}
.glow-1{width:220px;height:220px;background:rgba(210,164,94,.18);top:28px;left:30px}
.glow-2{width:260px;height:260px;background:rgba(255,255,255,.07);bottom:20px;right:30px;animation-delay:1s}
.glow-3{width:160px;height:160px;background:rgba(210,164,94,.12);top:45%;left:52%;animation-delay:2s}
.menu-hero-left,.menu-hero-right{position:relative;z-index:2}
.eyebrow{color:var(--gold);letter-spacing:4px;font-size:.82rem;margin-bottom:12px}
.menu-hero-left h2{
  font-family:'Playfair Display',serif;font-size:clamp(2.8rem,4vw,4.4rem);line-height:1.04;margin-bottom:18px
}
.hero-desc{color:var(--muted);line-height:1.95;max-width:660px;margin-bottom:22px}
.hero-tags,.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-tags span{
  padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);font-size:.9rem
}
.hero-actions{margin-top:20px}
.hero-btn{
  text-decoration:none;padding:14px 22px;border-radius:999px;font-weight:700;transition:.35s ease
}
.hero-btn.primary{
  background:linear-gradient(135deg,var(--gold),#e4bf86);color:#2b1d18
}
.hero-btn.secondary{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff
}
.hero-btn:hover{transform:translateY(-4px)}

.menu-hero-right{display:flex;align-items:center;justify-content:center;position:relative;min-height:560px}
.main-showcase{
  width:100%;max-width:430px;border-radius:30px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(16px);box-shadow:var(--shadow-heavy);
  overflow:hidden;animation:floatCard 4.5s ease-in-out infinite
}
.showcase-image img{height:280px;object-fit:cover}
.showcase-content{padding:24px}
.mini-label{color:var(--gold-soft);letter-spacing:2px;font-size:.78rem;margin-bottom:8px}
.showcase-content h3{font-family:'Playfair Display',serif;font-size:2rem;margin-bottom:8px}
.showcase-content p{color:var(--muted);line-height:1.85}
.showcase-bottom{margin-top:18px;display:flex;justify-content:space-between;align-items:center}
.showcase-bottom span{color:var(--gold-soft);font-weight:700}
.showcase-bottom a{
  text-decoration:none;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);color:#fff
}
.floating-badge,.mini-floating-card{
  position:absolute;z-index:5;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);box-shadow:var(--shadow)
}
.floating-badge{
  padding:10px 14px;border-radius:999px;font-size:.84rem;font-weight:600
}
.badge-1{left:6px;top:26px}
.badge-2{right:6px;top:90px}
.mini-floating-card{
  padding:16px 18px;border-radius:22px;display:flex;flex-direction:column;gap:4px;animation:floatCard 5s ease-in-out infinite
}
.mini-floating-card strong{font-family:'Playfair Display',serif;font-size:1.25rem}
.mini-floating-card span{color:var(--muted);font-size:.88rem}
.mini-card-1{left:-20px;bottom:90px;animation-delay:.7s}
.mini-card-2{right:-10px;bottom:20px;animation-delay:1.3s}

/* marquee */
.menu-marquee-wrap{
  margin-top:24px;overflow:hidden;border-radius:18px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)
}
.menu-marquee{display:flex;width:max-content;animation:marqueeMove 22s linear infinite}
.menu-marquee span{white-space:nowrap;padding:16px 20px;color:var(--gold-soft);font-weight:700;letter-spacing:1px}

/* category strip */
.menu-category-strip{
  margin-top:24px;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.2fr;gap:16px
}
.strip-box{
  text-decoration:none;text-align:center;padding:20px;border-radius:24px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);color:#fff;transition:.35s ease
}
.strip-box.big{font-weight:700}
.strip-box:hover,.strip-box.highlight{transform:translateY(-6px);background:rgba(255,255,255,.12)}

/* featured */
.featured-menu-section,.menu-section{margin-top:32px}
.featured-grid{
  display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:20px
}
.featured{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  padding: 60px auto;
  overflow:hidden;border-radius:30px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-heavy);min-height:300px
}

.item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.cup {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #f5f5f5;
  position: relative;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2),
              0 10px 20px rgba(0,0,0,0.2);
  overflow: hidden;
  border: 14px solid #f5f5f5;
}

.plate {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: #eee;
  box-shadow: inset 0 0 8px rgba (0,0,0,0.15),
              0 10px 20px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 14px solid #f5f5f5;
}

.viewport {
  width: 100%;
  height:100%;
  overflow: hidden;
}

.drinkscup .track {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease;
}

.drinkscup img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

#c1:checked ~ .item .cup .track {
  transform: translateY(0px)
}
#c2:checked ~ .item .cup .track {
  transform: translateY(-200px)
}
#c3:checked ~ .item .cup .track {
  transform: translateY(-400px)
}
#c4:checked ~ .item .cup .track {
  transform: translateY(-600px)
}
#c5:checked ~ .item .cup .track {
  transform: translateY(-800px)
}
#c6:checked ~ .item .cup .track {
  transform: translateY(-1000px)
}
#c7:checked ~ .item .cup .track {
  transform: translateY(-1200px)
}
#c8:checked ~ .item .cup .track {
  transform: translateY(-1400px)
}
#c9:checked ~ .item .cup .track {
  transform: translateY(-1600px)
}
#c10:checked ~ .item .cup .track {
  transform: translateY(-1800px)
}
#c11:checked ~ .item .cup .track {
  transform: translateY(-2000px)
}

.pastry .track{
  display: flex;
  transition: transform 0.5s ease;
}

.pastry img {
  width: 360px;
  height: 360px;
}

.pastry .item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.pastry .info {
  position: relative;
  margin-left: -60px;
}

#p1:checked ~ .item .plate .track {
  transform: translateX(0px);
}
#p2:checked ~ .item .plate .track {
  transform: translateX(-360px);
}
#p3:checked ~ .item .plate .track {
  transform: translateX(-720px);
}
#p4:checked ~ .item .plate .track {
  transform: translateX(-1080px);
}
#p5:checked ~ .item .plate .track {
  transform: translateX(-1440px);
}
#p6:checked ~ .item .plate .track {
  transform: translateX(-1800px);
}
#p7:checked ~ .item .plate .track {
  transform: translateX(-2160px);
}
#p8:checked ~ .item .plate .track {
  transform: translateX(-2520px);
}
#p9:checked ~ .item .plate .track {
  transform: translateX(-2880px);
}
#p10:checked ~ .item .plate .track {
  transform: translateX(-3240px);
}
#p11:checked ~ .item .plate .track {
  transform: translateX(-3600px);
}
#p12:checked ~ .item .plate .track {
  transform: translateX(-3960px);
}

.dots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dots label {
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
}

#c1:checked ~ .item .dots label[for="c1"],
#c2:checked ~ .item .dots label[for="c2"],
#c3:checked ~ .item .dots label[for="c3"],
#c4:checked ~ .item .dots label[for="c4"],
#c5:checked ~ .item .dots label[for="c5"],
#c6:checked ~ .item .dots label[for="c6"],
#c7:checked ~ .item .dots label[for="c7"],
#c8:checked ~ .item .dots label[for="c8"],
#c9:checked ~ .item .dots label[for="c9"],
#c10:checked ~ .item .dots label[for="c10"],
#c11:checked ~ .item .dots label[for="c11"],
#p1:checked ~ .item .dots label[for="p1"],
#p2:checked ~ .item .dots label[for="p2"],
#p3:checked ~ .item .dots label[for="p3"],
#p4:checked ~ .item .dots label[for="p4"],
#p5:checked ~ .item .dots label[for="p5"],
#p6:checked ~ .item .dots label[for="p6"],
#p7:checked ~ .item .dots label[for="p7"],
#p8:checked ~ .item .dots label[for="p8"],
#p9:checked ~ .item .dots label[for="p9"],
#p10:checked ~ .item .dots label[for="p10"],
#p11:checked ~ .item .dots label[for="p11"],
#p12:checked ~ .item .dots label[for="p12"] {
  background: #6b4f3b;
}

#c1:checked ~ .item .info .c1,
#c2:checked ~ .item .info .c2,
#c3:checked ~ .item .info .c3,
#c4:checked ~ .item .info .c4,
#c5:checked ~ .item .info .c5,
#c6:checked ~ .item .info .c6,
#c7:checked ~ .item .info .c7,
#c8:checked ~ .item .info .c8,
#c9:checked ~ .item .info .c9,
#c10:checked ~ .item .info .c10,
#c11:checked ~ .item .info .c11,
#p1:checked ~ .item .info .p1,
#p2:checked ~ .item .info .p2,
#p3:checked ~ .item .info .p3,
#p4:checked ~ .item .info .p4,
#p5:checked ~ .item .info .p5,
#p6:checked ~ .item .info .p6,
#p7:checked ~ .item .info .p7,
#p8:checked ~ .item .info .p8,
#p9:checked ~ .item .info .p9,
#p10:checked ~ .item .info .p10,
#p11:checked ~ .item .info .p11,
#p12:checked ~ .item .info .p12 {
  opacity: 1;
  transform: translateY(0);
}

.info {
  position: relative;
  width: 220px;
  height: 140px;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  opacity:0;
  transition: all 0.4s ease;
}

.card h3 {
  color: #756357;
  margin: 0;
  font-size: 18px;
}

.card p {
  color: #756357;
  font-size: 13px;
  margin: 5px 0 10px;
}

.drinkscup .info { order: 1; }
.drinkscup .cup { order: 2; }
.drinkscup .dots { order: 3; }

.pastry .plate { order: 2; }
.pastry .info { order: 3; }
.pastry .dots { order: 1; }

.drinkscup input[type="radio"],
.pastry input[type="radio"] {
  display: none;
}

/* filter chips */
.filter-chip-section{
  margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center
}
.filter-chip{
  padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);
  color:#fff;backdrop-filter:blur(10px);transition:.35s ease;cursor:default
}
.filter-chip.active,.filter-chip:hover{
  background:linear-gradient(135deg,var(--gold),#e4bf86);color:#2b1d18;transform:translateY(-3px)
}

/* menu grid */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.menu-card{
  position:relative;overflow:hidden;border-radius:30px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);backdrop-filter:blur(12px);
  transition:.35s ease
}
.menu-card::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.14), transparent 38%, transparent 72%, rgba(210,164,94,.08));
  opacity:0;transition:.35s ease;pointer-events:none
}
.menu-card:hover{transform:translateY(-10px);box-shadow:0 28px 60px rgba(0,0,0,.35)}
.menu-card:hover::before{opacity:1}
.card-top{
  position:absolute;top:14px;left:14px;right:14px;z-index:3;display:flex;justify-content:flex-start
}
.menu-badge{
  padding:8px 12px;border-radius:999px;background:rgba(20,12,8,.45);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px);font-size:.78rem;color:#fff
}
.menu-card img{height:260px;object-fit:cover;transition:.45s ease}
.menu-card:hover img{transform:scale(1.06)}
.menu-content{padding:22px}
.menu-content h3{font-family:'Playfair Display',serif;font-size:1.8rem;margin-bottom:8px}
.menu-content p{color:var(--muted);line-height:1.8;margin-bottom:14px}
.menu-meta{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px
}
.menu-meta span{
  padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.08);font-size:.8rem;color:var(--gold-soft)
}
.menu-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px}
.menu-bottom strong{color:var(--gold-soft);font-size:1rem}
.menu-bottom a{
  text-decoration:none;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);color:#fff;transition:.3s ease
}
.menu-bottom a:hover{transform:translateY(-2px)}

.footer{
  width:min(1200px, calc(100% - 32px));margin:24px auto;padding:22px;text-align:center;border-radius:22px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#fff;box-shadow:var(--shadow);position:relative;z-index:2
}

@keyframes floatGlow{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-16px) scale(1.04)}
}
@keyframes floatCard{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes marqueeMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media (max-width:1100px){
  .featured-grid{grid-template-columns:1fr 1fr}
  .featured-card.large-card{grid-column:span 2}
  .menu-grid{grid-template-columns:1fr 1fr}
  .menu-category-strip{grid-template-columns:1fr 1fr 1fr}
  .menu-hero{grid-template-columns:1fr}
  .menu-hero-right{min-height:620px}
}
@media (max-width:900px){
  .hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;margin-left:auto}
  .hamburger span{width:28px;height:3px;background:#fff;border-radius:99px}
  .navbar{width:100%;display:none;flex-direction:column}
  #nav-toggle:checked ~ .navbar{display:flex}
}
@media (max-width:600px){
  .menu-grid,.featured-grid,.menu-category-strip{grid-template-columns:1fr}
  .featured-card.large-card{grid-column:span 1}
  .menu-hero-left h2,.section-title h2{font-size:2rem}
  .main-showcase,.mini-floating-card{position:relative}
  .mini-card-1,.mini-card-2{left:auto;right:auto;bottom:auto;margin-top:14px}
  .badge-1,.badge-2{display:none}
  .menu-hero-right{min-height:auto}
}

/* ================= MENU UPGRADE ================= */
.menu-upgrade-section{
  margin-top: 30px;
}

.menu-filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:32px;
}

.filter-pill{
  text-decoration:none;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.10);
  color:#fff;
  backdrop-filter:blur(10px);
  transition:.35s ease;
}

.filter-pill:hover,
.filter-pill.active,
.filter-pill.highlight{
  transform:translateY(-4px);
  background:linear-gradient(135deg,var(--gold),#e4bf86);
  color:#2b1d18;
}

.menu-group{
  margin-top:38px;
}

.menu-upgrade-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.menu-upgrade-card{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  transition:.4s ease;
}

.menu-upgrade-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.14), transparent 40%, transparent 75%, rgba(210,164,94,0.08));
  opacity:0;
  transition:.35s ease;
  pointer-events:none;
  z-index:1;
}

.menu-upgrade-card:hover{
  transform:translateY(-10px) scale(1.01);
  box-shadow:0 28px 60px rgba(0,0,0,0.35);
}

.menu-upgrade-card:hover::before{
  opacity:1;
}

.menu-upgrade-image{
  position:relative;
  overflow:hidden;
}

.menu-upgrade-image img{
  width:100%;
  height:250px;
  object-fit:cover;
  transition:.5s ease;
}

.menu-upgrade-card:hover .menu-upgrade-image img{
  transform:scale(1.07);
}

.menu-tag{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(20,12,8,0.48);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(12px);
  color:#fff;
  font-size:.78rem;
}

.menu-upgrade-content{
  position:relative;
  z-index:2;
  padding:22px;
}

.menu-upgrade-content h3{
  font-family:'Playfair Display', serif;
  font-size:1.8rem;
  margin-bottom:8px;
}

.menu-upgrade-content p{
  color:var(--muted);
  line-height:1.8;
  margin-bottom:14px;
}

.menu-meta-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
  flex-wrap:wrap;
}

.menu-meta-row span{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  color:var(--gold-soft);
  font-size:.8rem;
}

.detail-link{
  display:inline-flex;
  text-decoration:none;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  transition:.3s ease;
}

.detail-link:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,0.18);
}

@media (max-width:1100px){
  .menu-upgrade-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:600px){
  .menu-upgrade-grid{
    grid-template-columns:1fr;
  }

  .menu-upgrade-image img{
    height:230px;
  }
}