:root{
  --bg:#050505;
  --text:#f4f4f0;
  --muted:rgba(255,255,255,.75);
  --muted-2:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#050505;
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bg-layer{position:fixed; inset:0; pointer-events:none}
.bg-layer.texture{
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.04), transparent 30%),
    radial-gradient(circle at 10% 70%, rgba(255,255,255,.02), transparent 24%),
    radial-gradient(circle at 88% 68%, rgba(255,255,255,.025), transparent 22%),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.45) 35%, rgba(0,0,0,.62) 100%),
    url('assets/bg-texture.png') center/cover no-repeat;
  opacity:.75;
}
.bg-layer.monkeys{
  background:url('assets/monkeys-3face.png') center 24px / min(1100px, 100vw) auto no-repeat;
  opacity:.16;
  mix-blend-mode:screen;
}
.bg-layer.vignette{
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent 18%, transparent 82%, rgba(0,0,0,.78));
}
.app-shell{
  max-width:560px;
  margin:0 auto;
  min-height:100dvh;
  position:relative;
  padding:calc(env(safe-area-inset-top, 0px) + 22px) 22px calc(env(safe-area-inset-bottom, 0px) + 26px);
}
.screen{display:flex; flex-direction:column; min-height:calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px)}
.topbar{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px}
.back-btn{
  appearance:none; border:0; background:none; color:var(--text); font-size:34px; line-height:1; padding:0; cursor:pointer;
}
.back-btn.hidden{visibility:hidden}
.lang-switch{display:inline-flex; gap:8px; align-items:center}
.flag-btn{
  appearance:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.025); padding:7px 8px; width:54px; height:34px; display:grid; place-items:center; border-radius:0; cursor:pointer;
}
.flag-btn.active{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2)}
.flag-btn svg{width:34px; height:18px; display:block}
.hero{padding-top:10px; text-align:center}
.hero-logo{width:min(76vw, 340px); max-width:340px; display:block; margin:0 auto 16px; filter:drop-shadow(0 18px 24px rgba(255,255,255,.02))}
.hero-mark{width:min(65vw, 240px); display:block; margin:0 auto 12px}
.hero-kicker{margin:0; font-size:1.1rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500}
.hero-sub{margin:10px 0 0; color:var(--muted); letter-spacing:.22em; text-transform:uppercase; font-size:.9rem}
.hero-divider{height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); margin:22px 0 18px}
.hero-foot{margin:0 0 20px; color:var(--muted-2); letter-spacing:.24em; text-transform:uppercase; font-size:.8rem}
.nav-list{display:flex; flex-direction:column; gap:12px}
.nav-card,.subnav-card{
  appearance:none; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)); color:var(--text); padding:22px 20px; width:100%; text-align:left; border-radius:0; cursor:pointer;
}
.nav-card-title,.subnav-title{display:flex; align-items:center; justify-content:space-between; gap:12px; text-transform:uppercase; letter-spacing:.18em; font-size:1rem; font-weight:500}
.nav-card-arrow,.subnav-arrow{font-size:1.4rem; color:rgba(255,255,255,.7)}
.page-header{margin-bottom:16px}
.page-title{margin:0; font-family:Georgia, 'Times New Roman', serif; text-transform:uppercase; letter-spacing:.08em; line-height:.92; font-size:2rem; font-weight:500}
.page-intro{margin:10px 0 0; color:var(--muted); line-height:1.65; font-size:.95rem}
.item-list{display:flex; flex-direction:column}
.item-card,.variant-group,.plain-row,.spirit-row{border-top:1px solid var(--line-soft); padding:16px 0}
.item-list > *:last-child{border-bottom:1px solid var(--line-soft)}
.item-head,.plain-head,.variant-head,.spirit-head{display:flex; justify-content:space-between; gap:14px; align-items:flex-start}
.item-name,.plain-name,.variant-name,.spirit-name{margin:0; text-transform:uppercase; letter-spacing:.12em; font-size:1.02rem; font-weight:600}
.item-desc,.spirit-sub{margin:6px 0 0; color:var(--muted); line-height:1.65; font-size:.94rem}
.item-note{margin:10px 0 0; color:rgba(255,255,255,.58); line-height:1.62; font-size:.92rem; font-style:italic}
.item-price,.plain-price,.spirit-price{white-space:nowrap; font-weight:700; letter-spacing:.08em}
.variant-list{margin-top:12px; display:flex; flex-direction:column; gap:10px}
.variant-row{display:flex; justify-content:space-between; gap:12px}
.variant-label{letter-spacing:.09em; text-transform:uppercase}
.placeholder{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); min-height:40vh; display:grid; place-items:center; color:var(--muted-2); letter-spacing:.22em; text-transform:uppercase; font-size:.84rem}
.footer{margin-top:auto; padding-top:24px; color:var(--muted-2); letter-spacing:.2em; text-transform:uppercase; font-size:.8rem; display:flex; align-items:center; gap:12px}
.footer::after{content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(255,255,255,.14), transparent)}
@media (max-width:420px){
  .app-shell{padding-left:16px;padding-right:16px}
  .hero-logo{width:min(82vw,320px)}
  .page-title{font-size:1.78rem}
  .nav-card-title,.subnav-title{font-size:.92rem}
}