*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#050505;--gold:#d4a017;--gold-soft:#f2cf74;--text:#f5f2eb;--muted:#bcae90}body{min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at top,rgba(212,160,23,.14),transparent 30%),linear-gradient(180deg,#151515,#050505);color:var(--text);font-family:"Montserrat",sans-serif}.menu-wrapper{width:100%;max-width:980px;margin:auto;padding:42px 18px 80px}.hero{text-align:center;margin-bottom:34px}.hero-topline{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:5px;margin-bottom:18px}.hero-title{font-family:"Cinzel",serif;font-size:86px;line-height:.92;color:var(--text)}.hero-divider{width:160px;height:1px;margin:26px auto 18px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.hero-tagline{color:var(--muted);letter-spacing:2px;font-size:14px}.menu-sheet{border-radius:34px;padding:48px 42px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(212,160,23,.14)}.category{margin-bottom:50px}.category-title{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:24px}.category-line{width:100%;max-width:140px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.category-name{font-family:"Cinzel",serif;color:var(--gold);font-size:38px;white-space:nowrap;letter-spacing:2px;text-transform:uppercase}.menu-list{display:grid;gap:16px}.menu-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;padding-bottom:16px;border-bottom:1px dashed rgba(212,160,23,.12)}.menu-name{font-size:18px;font-weight:600}.menu-meta{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}.available,.temp,.sold{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.available{color:#aaa}.temp{color:var(--gold-soft)}.sold{color:#ff6e6e}.menu-price{color:var(--gold);font-size:18px;font-weight:800;white-space:nowrap}.beans-section{margin-top:70px}.beans-subtitle{text-align:center;color:var(--muted);margin-top:-8px;margin-bottom:34px;letter-spacing:2px;font-size:11px;text-transform:uppercase}.beans-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.bean-card{padding:24px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));border:1px solid rgba(212,160,23,.1)}.bean-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.bean-origin{color:var(--muted);font-size:11px;letter-spacing:2px;text-transform:uppercase}.bean-badge{padding:6px 10px;border-radius:999px;background:rgba(212,160,23,.08);border:1px solid rgba(212,160,23,.12);color:var(--gold);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.bean-name{color:var(--gold);font-family:"Cinzel",serif;font-size:28px;line-height:1.1;margin-bottom:14px}.bean-note{color:var(--muted);line-height:1.8;font-size:14px}.loading{text-align:center;padding:70px 20px;color:var(--muted)}@media(max-width:768px){.menu-wrapper{padding:0}.hero{padding:42px 24px 24px;margin-bottom:0}.hero-title{font-size:52px;line-height:1}.menu-sheet{border-radius:30px 30px 0 0;padding:32px 20px 44px}.category-name{font-size:26px}.menu-name{font-size:15px}.menu-price{font-size:15px}.beans-grid{grid-template-columns:1fr}}

.price-separator{

  margin: 0 6px;

  opacity: .6;

}



.bean-price{

  margin-top: 18px;

  padding-top: 14px;

  border-top: 1px solid rgba(212, 175, 55, .15);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,.6);

}



.bean-price span{

  color: var(--gold);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 1px;

}

/* =========================
   BEANS CARD
========================= */

.bean-head{

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  margin-bottom: 28px;

}



.bean-category{

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: rgba(255,255,255,.75);

}



.bean-origin{

  font-size: 12px;

  color: rgba(255,255,255,.9);

  text-align: right;

}



.bean-card{

  cursor: pointer;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}



.bean-card:hover{

  transform: translateY(-4px);

  border-color:
    rgba(212,175,55,.35);

  box-shadow:
    0 0 30px rgba(212,175,55,.08);

}



/* =========================
   PRICE
========================= */

.bean-price{

  margin-top: 28px;

  padding-top: 18px;

  border-top:
    1px solid rgba(212,175,55,.12);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

}



.bean-price span{

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,.55);

}



.bean-price strong{

  color: var(--gold);

  font-size: 24px;

}



/* =========================
   MODAL
========================= */





.bean-modal-top{

  display: flex;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 32px;

}



.bean-modal-category{

  font-size: 12px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,.55);

  margin-bottom: 12px;

}



.bean-modal-name{

  font-size: 42px;

  line-height: 1.1;

  color: var(--gold);

  font-family: var(--serif-font);

}



.bean-modal-origin{

  color: rgba(255,255,255,.85);

  font-size: 15px;

  text-align: right;

}



.bean-modal-section{

  margin-bottom: 28px;

}



.bean-modal-label{

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,.45);

  margin-bottom: 10px;

}



.bean-modal-text{

  color: rgba(255,255,255,.82);

  line-height: 1.8;

  font-size: 15px;

}



.bean-modal-price{

  margin-top: 36px;

  padding-top: 20px;

  border-top:
    1px solid rgba(212,175,55,.12);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.bean-modal-price span{

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,.45);

}



.bean-modal-price strong{

  color: var(--gold);

  font-size: 28px;

}



.bean-modal-close{

  margin-top: 32px;

  width: 100%;

  border: none;

  border-radius: 16px;

  padding: 16px;

  background: var(--gold);

  color: #000;

  font-weight: 700;

  cursor: pointer;

  transition: .3s;

}



.bean-modal-close:hover{

  opacity: .9;

}

.bean-head{

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  margin-bottom: 28px;

}



.bean-category{

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: rgba(255,255,255,.75);

}



.bean-origin{

  font-size: 12px;

  color: rgba(255,255,255,.9);

  text-align: right;

}



.bean-card{

  cursor: pointer;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}



.bean-card:hover{

  transform: translateY(-4px);

  border-color:
    rgba(212,175,55,.35);

  box-shadow:
    0 0 30px rgba(212,175,55,.08);

}



.bean-price{

  margin-top: 28px;

  padding-top: 18px;

  border-top:
    1px solid rgba(212,175,55,.12);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

}



.bean-price span{

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,.55);

}



.bean-price strong{

  color: var(--gold);

  font-size: 24px;

}



.bean-modal{

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 24px;

}



.bean-modal-overlay{

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,.75);

  backdrop-filter: blur(8px);

}



.bean-modal-content{

  position: relative;

  width: 100%;

  max-width: 560px;

  background: #111;

  border:
    1px solid rgba(212,175,55,.15);

  border-radius: 28px;

  padding: 36px;

  z-index: 2;

  box-shadow:
    0 0 40px rgba(0,0,0,.5);

}



.bean-modal-top{

  display: flex;

  justify-content: space-between;

  gap: 18px;

  margin-bottom: 32px;

}



.bean-modal-category{

  font-size: 12px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,.55);

  margin-bottom: 12px;

}



.bean-modal-name{

  font-size: 42px;

  line-height: 1.1;

  color: var(--gold);

  font-family: var(--serif-font);

}



.bean-modal-origin{

  color: rgba(255,255,255,.85);

  font-size: 15px;

  text-align: right;

}



.bean-modal-section{

  margin-bottom: 28px;

}



.bean-modal-label{

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,.45);

  margin-bottom: 10px;

}



.bean-modal-text{

  color: rgba(255,255,255,.82);

  line-height: 1.8;

  font-size: 15px;

}



.bean-modal-price{

  margin-top: 36px;

  padding-top: 20px;

  border-top:
    1px solid rgba(212,175,55,.12);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.bean-modal-price span{

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,.45);

}



.bean-modal-price strong{

  color: var(--gold);

  font-size: 28px;

}



.bean-modal-close{

  margin-top: 32px;

  width: 100%;

  border: none;

  border-radius: 16px;

  padding: 16px;

  background: var(--gold);

  color: #000;

  font-weight: 700;

  cursor: pointer;

  transition: .3s;

}



.bean-modal-close:hover{

  opacity: .9;

}

.beans-section{

  margin-bottom: 120px;

}



.bean-head{

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  margin-bottom: 24px;

}



.bean-category{

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: rgba(255,255,255,.7);

}



.bean-origin{

  font-size: 12px;

  color: rgba(255,255,255,.9);

  text-align: right;

}



.bean-note{

  margin-top: 18px;

  color: rgba(255,255,255,.72);

  font-size: 14px;

  line-height: 1.8;

}



.bean-process{

  margin-top: 16px;

  display: inline-flex;

  padding: 8px 14px;

  border-radius: 999px;

  background:
    rgba(212,175,55,.08);

  border:
    1px solid rgba(212,175,55,.15);

  color: var(--gold);

  font-size: 10px;

  letter-spacing: 2px;

  text-transform: uppercase;

}



.bean-price{

  margin-top: 26px;

  padding-top: 18px;

  border-top:
    1px solid rgba(212,175,55,.12);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

}



.bean-price span{

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  color: rgba(255,255,255,.5);

}



.bean-price strong{

  color: var(--gold);

  font-size: 24px;

}

.menu-info-section{

  margin-bottom: 80px;

}

.menu-info-card{

  border: 1px solid rgba(212,175,55,.12);

  border-radius: 24px;

  padding: 28px;

  background: rgba(255,255,255,.02);

}

.menu-info-title{

  color: var(--gold);

  font-size: 18px;

  margin-bottom: 18px;

  letter-spacing: 2px;

  text-transform: uppercase;

}

.menu-info-item{

  color: rgba(255,255,255,.72);

  line-height: 1.8;

  margin-bottom: 10px;

}

.menu-footer{

  margin-top: 120px;

  padding-top: 48px;

  border-top: 1px solid rgba(212,175,55,.12);

  text-align: center;

  padding-bottom: 40px;

}

.footer-brand{

  color: var(--gold);

  font-size: 28px;

  margin-bottom: 14px;

  font-family: var(--serif-font);

}

.footer-contact{

  color: rgba(255,255,255,.55);

  margin-bottom: 8px;

  letter-spacing: 2px;

  text-transform: uppercase;

  font-size: 11px;

}

.footer-number{

  color: rgba(255,255,255,.85);

  margin-bottom: 28px;

}

.footer-credit{

  color: var(--gold);

  text-decoration: none;

  opacity: .85;

  transition: .3s;

}

.footer-credit:hover{

  opacity: 1;

}


.menu-global-info{

  margin-top: 18px;

  margin-bottom: 54px;

  text-align: center;

  color: rgba(255,255,255,.5);

  font-size: 11px;

  letter-spacing: 1.8px;

  line-height: 1.8;

  text-transform: uppercase;

}




/* =========================
   FOOTER LINK
========================= */

.footer-contact-text{

  color: rgba(255,255,255,.55);

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 18px;

}

.footer-links{

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 14px;

  flex-wrap: wrap;

  margin-bottom: 24px;

}

.footer-link{

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 12px 18px;

  border-radius: 999px;

  border:
    1px solid rgba(212,175,55,.15);

  background:
    rgba(255,255,255,.02);

  color: var(--gold);

  text-decoration: none;

  font-size: 13px;

  letter-spacing: 1px;

  transition: .3s ease;

}

.footer-link:hover{

  transform: translateY(-2px);

  border-color:
    rgba(212,175,55,.35);

  background:
    rgba(212,175,55,.05);

}

.footer-link i{

  font-size: 16px;

}

.footer-divider{

  width: 120px;

  height: 1px;

  margin: 18px auto 22px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(212,175,55,.35),
      transparent
    );

}



.footer-credit-text{

  color: rgba(255,255,255,.45);

  font-size: 11px;

  letter-spacing: 2px;

  text-transform: uppercase;

  margin-bottom: 14px;

}