/* T58 — final scoped menu/category refinement
   Keeps the approved T56 header untouched.
   Applies the same menu-card presentation to menu.html and the menu view inside index.html.
*/

:root{
  --m58-bg:#04121d;
  --m58-panel:#082032;
  --m58-panel-deep:#051725;
  --m58-gold:#e6bd61;
  --m58-gold-soft:#f1d48a;
  --m58-text:#f4efe3;
  --m58-muted:#c8d3d9;
  --m58-line:rgba(230,189,97,.18);
  --m58-shadow:0 22px 54px rgba(0,0,0,.28);
}

/* =========================
   MENU PAGE — SHARED DESIGN
   ========================= */
body.menu-page-v58{
  position:relative !important;
  min-height:100vh !important;
  background:#03101a !important;
  overflow-x:hidden !important;
}
body.menu-page-v58::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg,rgba(3,13,22,.60) 0%,rgba(3,13,22,.70) 20%,rgba(3,13,22,.82) 55%,rgba(3,13,22,.94) 100%),
    url('assets/menu-real/menu-page-bg-desktop.webp') center top / cover no-repeat !important;
}
body.menu-page-v58::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(230,189,97,.08),transparent 26%),
    linear-gradient(180deg,rgba(3,13,22,.05),rgba(3,13,22,.24) 40%,rgba(3,13,22,.42) 100%) !important;
}

html body #menu.menu-premium-page{
  position:relative !important;
  isolation:isolate !important;
  padding:18px 0 72px !important;
  background:transparent !important;
  overflow:visible !important;
}
html body #menu.menu-premium-page::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg,rgba(3,13,22,.10),rgba(3,13,22,.18) 28%,rgba(3,13,22,.36) 56%,rgba(3,13,22,.64) 100%) !important;
}
html body #menu .menu-premium-shell{
  width:min(1240px,calc(100% - 34px)) !important;
  margin-inline:auto !important;
}
html body #menu .menu-premium-hero{
  position:relative !important;
  min-height:228px !important;
  margin:8px 0 24px !important;
  overflow:hidden !important;
  border:1px solid var(--m58-line) !important;
  border-radius:32px !important;
  background:#071a29 !important;
  box-shadow:var(--m58-shadow),inset 0 1px 0 rgba(255,255,255,.035) !important;
}
html body #menu .menu-premium-hero-media,
html body #menu .menu-premium-hero-media img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
html body #menu .menu-premium-hero-media img{
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  filter:saturate(.88) contrast(1.04) brightness(.72) !important;
}
html body #menu .menu-premium-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(90deg,rgba(2,11,18,.94) 0%,rgba(2,11,18,.70) 52%,rgba(2,11,18,.42) 100%),
    linear-gradient(180deg,rgba(2,11,18,.12),rgba(2,11,18,.72)) !important;
}
html body #menu .menu-premium-hero-copy{
  position:relative !important;
  z-index:2 !important;
  max-width:720px !important;
  padding:28px 34px 24px !important;
}
html body #menu .menu-premium-eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 10px !important;
  color:var(--m58-gold-soft) !important;
  font-size:13px !important;
  font-weight:900 !important;
}
html body #menu .menu-premium-eyebrow::before{
  content:"" !important;
  width:38px !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,var(--m58-gold-soft)) !important;
}
html body #menu #menuTitle{
  margin:0 0 10px !important;
  color:#fff3d1 !important;
  font-size:clamp(36px,4.2vw,58px) !important;
  line-height:1.08 !important;
  text-shadow:0 14px 36px rgba(0,0,0,.36) !important;
}
html body #menu .menu-lux-head-divider{
  display:block !important;
  width:170px !important;
  height:2px !important;
  margin:14px 0 !important;
  background:linear-gradient(90deg,transparent,var(--m58-gold-soft),transparent) !important;
}
html body #menu .menu-premium-hero p{
  max-width:640px !important;
  margin:0 !important;
  color:#d7e1e6 !important;
  font-size:15px !important;
  line-height:1.95 !important;
}

/* Wi-Fi card */
html body #menu .guest-wifi-card-v269{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:18px !important;
  margin:0 0 24px !important;
  padding:18px 20px !important;
  border:1px solid rgba(230,189,97,.18) !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,rgba(12,55,80,.92),rgba(7,34,52,.96)) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.24) !important;
}
html body #menu .guest-wifi-icon-v269{
  width:62px !important;
  height:62px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:18px !important;
  background:linear-gradient(180deg,#f1ce78,#d9ab42) !important;
  color:#3f2a00 !important;
  font-size:12px !important;
  font-weight:900 !important;
}
html body #menu .guest-wifi-content-v269 span{
  color:#f0ce7e !important;
  font-size:12px !important;
  font-weight:900 !important;
}
html body #menu .guest-wifi-content-v269 h3{
  margin:4px 0 6px !important;
  color:#fff !important;
  font-size:34px !important;
  line-height:1.1 !important;
}
html body #menu .guest-wifi-content-v269 p{
  margin:0 !important;
  color:#d5e2e9 !important;
  font-size:15px !important;
}
html body #menu #copyGuestWifiV269{
  min-height:48px !important;
  padding:0 18px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.08) !important;
  color:#fff !important;
  font-weight:800 !important;
}

html body #menu .menu-premium-section-head{
  display:flex !important;
  align-items:end !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin:0 0 18px !important;
  padding:0 4px !important;
}
html body #menu .menu-premium-section-head span{
  display:block !important;
  color:var(--m58-gold) !important;
  font-size:13px !important;
  font-weight:900 !important;
}
html body #menu .menu-premium-section-head strong{
  display:block !important;
  color:#fff !important;
  font-size:25px !important;
  line-height:1.4 !important;
}

/* Approved card layout — same on menu.html and index.html */
html body #menu .menu-lux-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}
html body #menu .menu-category-card.menu-lux-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:386px !important;
  padding:10px !important;
  overflow:hidden !important;
  border:1px solid rgba(230,189,97,.16) !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(10,31,47,.98),rgba(5,18,28,.995)) !important;
  box-shadow:0 22px 54px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.035) !important;
  text-decoration:none !important;
  transform:none !important;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease !important;
}
html body #menu .menu-category-card.menu-lux-card:hover{
  transform:translateY(-5px) !important;
  border-color:rgba(239,207,133,.34) !important;
  box-shadow:0 30px 68px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html body #menu .menu-category-card.menu-lux-card::before,
html body #menu .menu-category-card.menu-lux-card::after,
html body #menu .menu-category-card.menu-lux-card .menu-lux-corner{
  display:none !important;
}
html body #menu .menu-lux-image{
  position:relative !important;
  order:0 !important;
  display:block !important;
  width:100% !important;
  height:208px !important;
  flex:0 0 208px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  outline:0 !important;
  border-radius:20px !important;
  background:#081a28 !important;
  box-shadow:0 14px 32px rgba(0,0,0,.24) !important;
  transform:none !important;
}
html body #menu .menu-lux-image::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 45%,rgba(3,13,21,.26)) !important;
}
html body #menu .menu-lux-image::after{display:none !important;}
html body #menu .menu-lux-image img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:saturate(.96) contrast(1.04) brightness(.95) !important;
  transform:scale(1.001) !important;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .25s ease !important;
}
html body #menu .menu-category-card.menu-lux-card:hover .menu-lux-image img{
  transform:scale(1.04) !important;
  filter:saturate(1.02) contrast(1.05) brightness(1) !important;
}
html body #menu .menu-lux-copy{
  order:1 !important;
  display:block !important;
  width:100% !important;
  min-height:118px !important;
  padding:18px 15px 9px !important;
  text-align:start !important;
}
html body #menu .menu-lux-copy strong{
  display:block !important;
  margin:0 0 8px !important;
  color:var(--m58-gold-soft) !important;
  font-size:23px !important;
  line-height:1.3 !important;
  font-weight:900 !important;
}
html body #menu .menu-lux-copy small{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  margin:0 !important;
  color:var(--m58-muted) !important;
  font-size:13px !important;
  line-height:1.82 !important;
}
html body #menu .menu-lux-action{
  order:2 !important;
  width:auto !important;
  min-height:44px !important;
  margin:auto 15px 15px !important;
  padding:0 14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  border:1px solid rgba(230,189,97,.18) !important;
  border-radius:15px !important;
  background:rgba(230,189,97,.045) !important;
  color:#f1deab !important;
  font-size:13px !important;
  font-weight:800 !important;
}
html body #menu .menu-lux-action b{
  color:var(--m58-gold-soft) !important;
  font-size:18px !important;
}
html body #menu .menu-lux-divider{display:none !important;}

/* =========================
   CATEGORY PAGE
   ========================= */
body.category-luxury-body{
  min-height:100vh !important;
  background:#03101a !important;
  overflow-x:hidden !important;
}
body.category-luxury-body::before{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-2 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg,rgba(3,13,22,.54) 0%,rgba(3,13,22,.68) 30%,rgba(3,13,22,.88) 70%,rgba(3,13,22,.96) 100%),
    url('assets/menu-real/category-page-bg-desktop.webp') center top / cover no-repeat !important;
}
body.category-luxury-body::after{
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:radial-gradient(circle at 50% 0%,rgba(230,189,97,.08),transparent 28%) !important;
}
body.category-luxury-body .menu-category-premium{
  position:relative !important;
  min-height:calc(100vh - 92px) !important;
  margin:0 !important;
  padding:24px 0 70px !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
}
body.category-luxury-body .menu-category-premium::before,
body.category-luxury-body .menu-category-premium::after,
body.category-luxury-body .category-detail-overlay,
body.category-luxury-body .category-note{
  display:none !important;
}
body.category-luxury-body .category-detail-shell{
  position:relative !important;
  z-index:1 !important;
  width:min(1180px,calc(100% - 34px)) !important;
  margin:0 auto !important;
}
body.category-luxury-body .category-back-wrap{margin:0 0 18px !important;}
body.category-luxury-body .category-back-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:46px !important;
  padding:0 18px !important;
  border:1px solid rgba(230,189,97,.18) !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,rgba(8,24,36,.88),rgba(5,16,25,.94)) !important;
  box-shadow:0 12px 30px rgba(0,0,0,.22) !important;
  color:#f1deab !important;
  text-decoration:none !important;
}
body.category-luxury-body .category-detail-head{
  margin:0 0 22px !important;
  padding:30px 26px 26px !important;
  border:1px solid rgba(230,189,97,.14) !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(7,24,37,.90),rgba(4,16,25,.96)) !important;
  box-shadow:0 24px 58px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03) !important;
  text-align:center !important;
  overflow:hidden !important;
}
body.category-luxury-body .category-detail-head::before,
body.category-luxury-body .category-detail-head::after{display:none !important;}
body.category-luxury-body .category-detail-head h2{
  margin:0 0 12px !important;
  color:#f2d58c !important;
  font-size:clamp(36px,4vw,60px) !important;
  line-height:1.08 !important;
}
body.category-luxury-body .category-detail-head h2::after{
  content:"" !important;
  display:block !important;
  width:118px !important;
  height:12px !important;
  margin:13px auto 0 !important;
  background:url('assets/ui/fleur-small.png') center/contain no-repeat !important;
}
body.category-luxury-body .category-detail-head p{
  max-width:760px !important;
  margin:0 auto !important;
  color:#d7e1e6 !important;
  font-size:15px !important;
  line-height:1.9 !important;
}
body.category-luxury-body .category-detail-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
  margin:0 !important;
}

body.category-luxury-body .category-subsection-title{
  grid-column:1 / -1 !important;
  display:flex !important;
  align-items:center !important;
  gap:13px !important;
  margin:6px 0 0 !important;
}
body.category-luxury-body .category-subsection-title::before,
body.category-luxury-body .category-subsection-title::after{
  content:"" !important;
  flex:1 !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(230,189,97,.22),transparent) !important;
}
body.category-luxury-body .category-subsection-title span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:40px !important;
  padding:0 17px !important;
  border:1px solid rgba(230,189,97,.17) !important;
  border-radius:999px !important;
  background:rgba(7,23,36,.84) !important;
  color:#f0d38a !important;
  font-size:15px !important;
  font-weight:900 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.18) !important;
}
body.category-luxury-body .category-item-card{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:220px !important;
  gap:14px !important;
  padding:21px 20px 18px !important;
  border:1px solid rgba(230,189,97,.14) !important;
  border-radius:23px !important;
  background:linear-gradient(180deg,rgba(10,31,47,.96),rgba(5,18,28,.99)) !important;
  box-shadow:0 19px 44px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.03) !important;
  overflow:hidden !important;
}
body.category-luxury-body .category-item-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 34%) !important;
}
body.category-luxury-body .category-item-card::after{display:none !important;}
body.category-luxury-body .category-item-main{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  flex-direction:column !important;
  flex:1 !important;
  gap:9px !important;
}
body.category-luxury-body .category-item-card h3{
  margin:0 !important;
  color:#f1d48a !important;
  font-size:22px !important;
  line-height:1.35 !important;
  font-weight:900 !important;
}
body.category-luxury-body .category-item-card p{
  margin:0 !important;
  color:#d4dee3 !important;
  font-size:13px !important;
  line-height:1.88 !important;
}
body.category-luxury-body .category-item-card .ingredients{
  margin-top:auto !important;
  padding-top:11px !important;
  border-top:1px solid rgba(255,255,255,.07) !important;
  color:#b9c7ce !important;
  font-size:12px !important;
  line-height:1.8 !important;
}
body.category-luxury-body .category-item-card .ingredients b{color:#f0d38a !important;}
body.category-luxury-body .hookah-warning{
  color:#dfbd74 !important;
  font-size:11px !important;
  line-height:1.7 !important;
}
/* requested: price centered at the bottom */
body.category-luxury-body .category-item-card .price,
html[dir="ltr"] body.category-luxury-body .category-item-card .price{
  position:relative !important;
  z-index:1 !important;
  align-self:center !important;
  justify-self:center !important;
  min-width:76px !important;
  margin:0 auto !important;
  padding:10px 14px !important;
  border:1px solid rgba(230,189,97,.18) !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(20,40,56,.96),rgba(8,21,31,.99)) !important;
  color:#fff2c8 !important;
  font-size:20px !important;
  line-height:1 !important;
  font-weight:900 !important;
  text-align:center !important;
  box-shadow:0 11px 24px rgba(0,0,0,.17) !important;
}

@media(max-width:1100px){
  html body #menu .menu-lux-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  body.category-luxury-body .category-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* =========================
   MOBILE — independent clean layout
   ========================= */
@media(max-width:720px){
  body.menu-page-v58::before{
    background:
      linear-gradient(180deg,rgba(3,13,22,.62) 0%,rgba(3,13,22,.74) 22%,rgba(3,13,22,.84) 55%,rgba(3,13,22,.94) 100%),
      url('assets/menu-real/menu-page-bg-mobile.webp') center top / cover no-repeat !important;
  }
  body.menu-page-v58::after{
    background:
      radial-gradient(circle at 50% 0%,rgba(230,189,97,.07),transparent 30%),
      linear-gradient(180deg,rgba(3,13,22,.06),rgba(3,13,22,.26) 42%,rgba(3,13,22,.42) 100%) !important;
  }
  html body #menu.menu-premium-page{
    padding:12px 0 52px !important;
  }
  html body #menu .menu-premium-shell{
    width:calc(100% - 18px) !important;
  }
  html body #menu .menu-premium-hero{
    min-height:246px !important;
    margin:4px 0 18px !important;
    border-radius:24px !important;
  }
  html body #menu .menu-premium-hero::after{
    background:
      linear-gradient(180deg,rgba(2,11,18,.50),rgba(2,11,18,.80)),
      linear-gradient(90deg,rgba(2,11,18,.82),rgba(2,11,18,.50)) !important;
  }
  html body #menu .menu-premium-hero-copy{
    max-width:none !important;
    padding:26px 18px 22px !important;
  }
  html body #menu .menu-premium-eyebrow{
    font-size:12px !important;
    margin-bottom:8px !important;
  }
  html body #menu .menu-premium-eyebrow::before{width:30px !important;}
  html body #menu #menuTitle{
    font-size:36px !important;
    line-height:1.12 !important;
  }
  html body #menu .menu-lux-head-divider{
    width:140px !important;
    margin:12px 0 !important;
  }
  html body #menu .menu-premium-hero p{
    font-size:13px !important;
    line-height:1.82 !important;
  }
  html body #menu .guest-wifi-card-v269{
    grid-template-columns:60px minmax(0,1fr) !important;
    gap:12px !important;
    padding:15px !important;
    margin-bottom:18px !important;
    border-radius:20px !important;
  }
  html body #menu .guest-wifi-icon-v269{
    width:56px !important;
    height:56px !important;
    border-radius:16px !important;
  }
  html body #menu .guest-wifi-content-v269 h3{
    font-size:26px !important;
    margin:3px 0 5px !important;
  }
  html body #menu .guest-wifi-content-v269 p{
    font-size:13px !important;
  }
  html body #menu #copyGuestWifiV269{
    grid-column:1 / -1 !important;
    width:100% !important;
    min-height:44px !important;
  }
  html body #menu .menu-premium-section-head{
    display:block !important;
    margin-bottom:14px !important;
  }
  html body #menu .menu-premium-section-head span{
    font-size:12px !important;
  }
  html body #menu .menu-premium-section-head strong{
    margin-top:5px !important;
    font-size:19px !important;
    line-height:1.5 !important;
    text-align:start !important;
  }
  html body #menu .menu-lux-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  html body #menu .menu-category-card.menu-lux-card{
    min-height:0 !important;
    padding:9px !important;
    border-radius:22px !important;
  }
  html body #menu .menu-lux-image{
    width:100% !important;
    height:184px !important;
    flex:0 0 184px !important;
    border-radius:17px !important;
  }
  html body #menu .menu-lux-copy{
    min-height:0 !important;
    padding:15px 12px 8px !important;
  }
  html body #menu .menu-lux-copy strong{
    font-size:21px !important;
    margin-bottom:6px !important;
  }
  html body #menu .menu-lux-copy small{
    -webkit-line-clamp:3 !important;
    font-size:12px !important;
    line-height:1.75 !important;
  }
  html body #menu .menu-lux-action{
    min-height:42px !important;
    margin:4px 12px 12px !important;
    justify-content:center !important;
    gap:10px !important;
  }

  body.category-luxury-body::before{
    background:
      linear-gradient(180deg,rgba(3,13,22,.58) 0%,rgba(3,13,22,.72) 30%,rgba(3,13,22,.89) 68%,rgba(3,13,22,.96) 100%),
      url('assets/menu-real/category-page-bg-mobile.webp') center top / cover no-repeat !important;
  }
  body.category-luxury-body .menu-category-premium{
    padding:16px 0 50px !important;
  }
  body.category-luxury-body .category-detail-shell{
    width:calc(100% - 18px) !important;
  }
  body.category-luxury-body .category-back-wrap{margin-bottom:14px !important;}
  body.category-luxury-body .category-back-btn{
    width:100% !important;
    justify-content:center !important;
    min-height:44px !important;
  }
  body.category-luxury-body .category-detail-head{
    margin-bottom:17px !important;
    padding:24px 16px 20px !important;
    border-radius:23px !important;
  }
  body.category-luxury-body .category-detail-head h2{
    font-size:38px !important;
    margin-bottom:10px !important;
  }
  body.category-luxury-body .category-detail-head h2::after{
    width:108px !important;
    margin-top:11px !important;
  }
  body.category-luxury-body .category-detail-head p{
    font-size:13px !important;
    line-height:1.82 !important;
  }
  body.category-luxury-body .category-detail-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  body.category-luxury-body .category-subsection-title{
    gap:9px !important;
    margin:6px 0 2px !important;
  }
  body.category-luxury-body .category-subsection-title span{
    min-height:36px !important;
    padding:0 14px !important;
    font-size:14px !important;
  }
  body.category-luxury-body .category-item-card{
    min-height:0 !important;
    gap:12px !important;
    padding:17px 15px 14px !important;
    border-radius:20px !important;
    margin:0 !important;
  }
  body.category-luxury-body .category-item-card h3{
    font-size:20px !important;
    line-height:1.4 !important;
  }
  body.category-luxury-body .category-item-card p{
    font-size:12px !important;
    line-height:1.82 !important;
  }
  body.category-luxury-body .category-item-card .ingredients{
    font-size:11px !important;
    padding-top:10px !important;
  }
  body.category-luxury-body .category-item-card .price,
  html[dir="ltr"] body.category-luxury-body .category-item-card .price{
    min-width:70px !important;
    padding:9px 12px !important;
    font-size:19px !important;
    border-radius:13px !important;
    align-self:center !important;
    justify-self:center !important;
    margin-inline:auto !important;
  }
}


/* T60 — ensure the approved backgrounds also render inside the menu view embedded in index.html */
body.index-menu-bg-v60 #menu.menu-premium-page,
body.menu-page-v58 #menu.menu-premium-page{
  background:
    linear-gradient(180deg,rgba(3,13,22,.56) 0%,rgba(3,13,22,.68) 18%,rgba(3,13,22,.80) 48%,rgba(3,13,22,.94) 100%),
    url('assets/menu-real/menu-page-bg-desktop.webp') center top / 100% auto no-repeat,
    linear-gradient(180deg,#061824 0%,#04121d 54%,#03101a 100%) !important;
}
body.index-menu-bg-v60 #menu.menu-premium-page::before,
body.menu-page-v58 #menu.menu-premium-page::before{
  background:
    radial-gradient(circle at 50% 4%,rgba(230,189,97,.09),transparent 28%),
    linear-gradient(180deg,rgba(3,13,22,.04) 0%,rgba(3,13,22,.20) 30%,rgba(3,13,22,.50) 66%,rgba(3,13,22,.76) 100%) !important;
}

@media(max-width:720px){
  body.index-menu-bg-v60 #menu.menu-premium-page,
  body.menu-page-v58 #menu.menu-premium-page{
    background:
      linear-gradient(180deg,rgba(3,13,22,.60) 0%,rgba(3,13,22,.70) 20%,rgba(3,13,22,.82) 52%,rgba(3,13,22,.94) 100%),
      url('assets/menu-real/menu-page-bg-mobile.webp') center top / 100% auto no-repeat,
      linear-gradient(180deg,#061824 0%,#04121d 56%,#03101a 100%) !important;
  }
}

/* ==========================================================
   T61 — premium top-image fade
   The resort image is intentionally limited to the upper page.
   It dissolves into the deep navy background instead of stretching
   or repeating through long menus. Cards/header remain untouched.
   ========================================================== */

/* Reset the old full-page fixed backgrounds. */
body.menu-page-v58,
body.category-luxury-body{
  background:#03101a !important;
}
body.menu-page-v58::before,
body.menu-page-v58::after,
body.category-luxury-body::before,
body.category-luxury-body::after{
  display:none !important;
}

/* Menu page and the menu view inside index.html. */
body.index-menu-bg-v60 #menu.menu-premium-page,
body.menu-page-v58 #menu.menu-premium-page{
  background:
    linear-gradient(180deg,
      rgba(3,13,22,.22) 0,
      rgba(3,13,22,.34) 210px,
      rgba(3,13,22,.54) 470px,
      rgba(3,13,22,.82) 760px,
      #03101a 1040px,
      #03101a 100%),
    url('assets/menu-real/menu-top-fade-desktop.webp') center top / 100% auto no-repeat,
    #03101a !important;
  background-attachment:scroll !important;
}
body.index-menu-bg-v60 #menu.menu-premium-page::before,
body.menu-page-v58 #menu.menu-premium-page::before{
  background:
    radial-gradient(circle at 50% 4%,rgba(236,201,120,.10),transparent 31%),
    linear-gradient(180deg,rgba(3,13,22,.03),rgba(3,13,22,.10) 34%,rgba(3,13,22,.30) 64%,rgba(3,13,22,.56) 100%) !important;
}

/* Internal category pages use the same visual language, only at the top. */
body.category-luxury-body .menu-category-premium{
  background:
    linear-gradient(180deg,
      rgba(3,13,22,.28) 0,
      rgba(3,13,22,.40) 220px,
      rgba(3,13,22,.62) 500px,
      rgba(3,13,22,.86) 780px,
      #03101a 1020px,
      #03101a 100%),
    url('assets/menu-real/menu-top-fade-desktop.webp') center top / 100% auto no-repeat,
    #03101a !important;
  background-attachment:scroll !important;
}

@media(max-width:720px){
  body.index-menu-bg-v60 #menu.menu-premium-page,
  body.menu-page-v58 #menu.menu-premium-page{
    background:
      linear-gradient(180deg,
        rgba(3,13,22,.20) 0,
        rgba(3,13,22,.34) 190px,
        rgba(3,13,22,.58) 430px,
        rgba(3,13,22,.84) 690px,
        #03101a 900px,
        #03101a 100%),
      url('assets/menu-real/menu-top-fade-mobile.webp') center top / 100% auto no-repeat,
      #03101a !important;
  }
  body.index-menu-bg-v60 #menu.menu-premium-page::before,
  body.menu-page-v58 #menu.menu-premium-page::before{
    background:
      radial-gradient(circle at 50% 2%,rgba(236,201,120,.08),transparent 33%),
      linear-gradient(180deg,rgba(3,13,22,.04),rgba(3,13,22,.14) 38%,rgba(3,13,22,.42) 72%,rgba(3,13,22,.62) 100%) !important;
  }
  body.category-luxury-body .menu-category-premium{
    background:
      linear-gradient(180deg,
        rgba(3,13,22,.24) 0,
        rgba(3,13,22,.38) 180px,
        rgba(3,13,22,.62) 390px,
        rgba(3,13,22,.86) 650px,
        #03101a 840px,
        #03101a 100%),
      url('assets/menu-real/menu-top-fade-mobile.webp') center top / 100% auto no-repeat,
      #03101a !important;
  }
}

/* ==========================================================
   T62 — fixed full-page background trial
   The image is fixed to the viewport instead of stretched with
   document height. Header, cards, text and menu data are untouched.
   ========================================================== */

/* Remove the T61 top-only image layers. */
body.index-menu-bg-v60 #menu.menu-premium-page,
body.menu-page-v58 #menu.menu-premium-page,
body.category-luxury-body .menu-category-premium{
  background:transparent !important;
  isolation:isolate !important;
}

/* Full-screen fixed artwork for menu.html and the menu view in index.html. */
body.index-menu-bg-v60 #menu.menu-premium-page::before,
body.menu-page-v58 #menu.menu-premium-page::before{
  display:block !important;
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg,
      rgba(2,10,17,.54) 0%,
      rgba(2,10,17,.62) 42%,
      rgba(2,10,17,.72) 100%),
    url('assets/menu-real/menu-top-fade-desktop.webp') center center / cover no-repeat !important;
  transform:translateZ(0) !important;
}
body.index-menu-bg-v60 #menu.menu-premium-page::after,
body.menu-page-v58 #menu.menu-premium-page::after{
  display:block !important;
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 50% 12%,rgba(240,205,124,.10),transparent 32%),
    linear-gradient(90deg,rgba(1,7,12,.28),transparent 24%,transparent 76%,rgba(1,7,12,.28)),
    linear-gradient(180deg,rgba(3,13,22,.03),rgba(3,13,22,.20)) !important;
}
body.index-menu-bg-v60 #menu.menu-premium-page > .menu-premium-shell,
body.menu-page-v58 #menu.menu-premium-page > .menu-premium-shell{
  position:relative !important;
  z-index:1 !important;
}

/* Internal category pages: same fixed treatment. */
body.category-luxury-body::before{
  display:block !important;
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(180deg,
      rgba(2,10,17,.56) 0%,
      rgba(2,10,17,.65) 45%,
      rgba(2,10,17,.74) 100%),
    url('assets/menu-real/menu-top-fade-desktop.webp') center center / cover no-repeat !important;
  transform:translateZ(0) !important;
}
body.category-luxury-body::after{
  display:block !important;
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 50% 10%,rgba(240,205,124,.08),transparent 30%),
    linear-gradient(90deg,rgba(1,7,12,.30),transparent 25%,transparent 75%,rgba(1,7,12,.30)),
    linear-gradient(180deg,rgba(3,13,22,.04),rgba(3,13,22,.22)) !important;
}
body.category-luxury-body > .page-shell{
  position:relative !important;
  z-index:1 !important;
}

@media(max-width:720px){
  body.index-menu-bg-v60 #menu.menu-premium-page::before,
  body.menu-page-v58 #menu.menu-premium-page::before{
    background:
      linear-gradient(180deg,
        rgba(2,10,17,.56) 0%,
        rgba(2,10,17,.64) 44%,
        rgba(2,10,17,.74) 100%),
      url('assets/menu-real/menu-top-fade-mobile.webp') center center / cover no-repeat !important;
  }
  body.index-menu-bg-v60 #menu.menu-premium-page::after,
  body.menu-page-v58 #menu.menu-premium-page::after{
    background:
      radial-gradient(circle at 50% 8%,rgba(240,205,124,.08),transparent 34%),
      linear-gradient(180deg,rgba(3,13,22,.05),rgba(3,13,22,.24)) !important;
  }
  body.category-luxury-body::before{
    background:
      linear-gradient(180deg,
        rgba(2,10,17,.58) 0%,
        rgba(2,10,17,.66) 46%,
        rgba(2,10,17,.76) 100%),
      url('assets/menu-real/menu-top-fade-mobile.webp') center center / cover no-repeat !important;
  }
  body.category-luxury-body::after{
    background:
      radial-gradient(circle at 50% 7%,rgba(240,205,124,.07),transparent 34%),
      linear-gradient(180deg,rgba(3,13,22,.05),rgba(3,13,22,.25)) !important;
  }
}

/* ==========================================================
   T63 — unified background visibility fix for menu + category
   Goal: keep the luxurious resort artwork visible behind the sections
   on both desktop and mobile without touching cards/text structure.
   ========================================================== */

/* Kill element-level trial backgrounds so the body artwork is the single source of truth. */
body.menu-page-v58 #menu.menu-premium-page::before,
body.menu-page-v58 #menu.menu-premium-page::after,
body.index-menu-bg-v60 #menu.menu-premium-page::before,
body.index-menu-bg-v60 #menu.menu-premium-page::after,
body.category-luxury-body .menu-category-premium::before,
body.category-luxury-body .menu-category-premium::after{
  display:none !important;
  content:none !important;
}

body.menu-page-v58,
body.index-menu-bg-v60,
body.category-luxury-body{
  position:relative !important;
  min-height:100dvh !important;
  background:#03101a !important;
}

body.menu-page-v58::before,
body.index-menu-bg-v60::before,
body.category-luxury-body::before{
  display:block !important;
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  transform:translateZ(0) !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  filter:brightness(1.10) contrast(1.08) saturate(1.06) !important;
}

body.menu-page-v58::after,
body.index-menu-bg-v60::after,
body.category-luxury-body::after{
  display:block !important;
  content:"" !important;
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
}

/* Menu page / menu view background: richer and more visible in the sections. */
body.menu-page-v58::before,
body.index-menu-bg-v60::before{
  background:
    linear-gradient(180deg,
      rgba(3,13,22,.24) 0%,
      rgba(3,13,22,.30) 36%,
      rgba(3,13,22,.42) 100%),
    url('assets/menu-real/menu-page-bg-desktop.webp') center center / cover no-repeat !important;
}
body.menu-page-v58::after,
body.index-menu-bg-v60::after{
  background:
    radial-gradient(circle at 50% 8%,rgba(242,207,125,.12),transparent 34%),
    linear-gradient(90deg,rgba(3,12,20,.10) 0%,transparent 15%,transparent 85%,rgba(3,12,20,.10) 100%),
    linear-gradient(180deg,rgba(3,13,22,.02),rgba(3,13,22,.10)) !important;
}

/* Category page background: a brighter dedicated scene so the center sections do not die. */
body.category-luxury-body::before{
  background:
    linear-gradient(180deg,
      rgba(3,13,22,.22) 0%,
      rgba(3,13,22,.28) 36%,
      rgba(3,13,22,.40) 100%),
    url('assets/menu-real/category-page-bg-desktop.webp') center center / cover no-repeat !important;
}
body.category-luxury-body::after{
  background:
    radial-gradient(circle at 50% 7%,rgba(242,207,125,.12),transparent 34%),
    linear-gradient(90deg,rgba(3,12,20,.09) 0%,transparent 16%,transparent 84%,rgba(3,12,20,.09) 100%),
    linear-gradient(180deg,rgba(3,13,22,.02),rgba(3,13,22,.10)) !important;
}

/* Content stays above the background. */
body.menu-page-v58 .page-shell,
body.index-menu-bg-v60 .page-shell,
body.category-luxury-body .page-shell,
body.menu-page-v58 #menu.menu-premium-page,
body.index-menu-bg-v60 #menu.menu-premium-page,
body.category-luxury-body .menu-category-premium{
  position:relative !important;
  z-index:1 !important;
  background:transparent !important;
}

/* Mobile: use the vertical artwork and shift it upward so it is visible around the cards. */
@media(max-width:720px){
  body.menu-page-v58::before,
  body.index-menu-bg-v60::before{
    background:
      linear-gradient(180deg,
        rgba(3,13,22,.22) 0%,
        rgba(3,13,22,.28) 38%,
        rgba(3,13,22,.40) 100%),
      url('assets/menu-real/menu-page-bg-mobile.webp') center top / cover no-repeat !important;
  }
  body.menu-page-v58::after,
  body.index-menu-bg-v60::after{
    background:
      radial-gradient(circle at 50% 6%,rgba(242,207,125,.11),transparent 36%),
      linear-gradient(180deg,rgba(3,13,22,.02),rgba(3,13,22,.10)) !important;
  }

  body.category-luxury-body::before{
    background:
      linear-gradient(180deg,
        rgba(3,13,22,.20) 0%,
        rgba(3,13,22,.26) 38%,
        rgba(3,13,22,.38) 100%),
      url('assets/menu-real/category-page-bg-mobile.webp') center top / cover no-repeat !important;
  }
  body.category-luxury-body::after{
    background:
      radial-gradient(circle at 50% 6%,rgba(242,207,125,.10),transparent 36%),
      linear-gradient(180deg,rgba(3,13,22,.02),rgba(3,13,22,.10)) !important;
  }
}

/* ==========================================================
   T65 — compact menu hero on mobile only
   Removes unused vertical space without changing desktop,
   cards, text content, translations, or background system.
   ========================================================== */
@media (max-width:720px){
  html body #menu .menu-premium-hero{
    min-height:0 !important;
    height:auto !important;
    margin:4px 0 16px !important;
    border-radius:22px !important;
  }

  html body #menu .menu-premium-hero-copy{
    max-width:none !important;
    padding:19px 16px 17px !important;
  }

  html body #menu .menu-premium-eyebrow{
    margin-bottom:5px !important;
  }

  html body #menu #menuTitle{
    margin-bottom:5px !important;
    font-size:34px !important;
    line-height:1.1 !important;
  }

  html body #menu .menu-lux-head-divider{
    width:128px !important;
    margin:8px 0 9px !important;
  }

  html body #menu .menu-premium-hero p{
    font-size:12.5px !important;
    line-height:1.72 !important;
  }
}
