/* ════════════════════════════════════════════
   BASE
════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#0f0d0a;--bg2:#1a1612;--bg3:#221e18;--card:#1c1812;
  --gold:#c9a84c;--gold-l:#e8c96e;--cream:#f0e8d5;
  --muted:#8a7d68;--border:#2e2820;
}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--cream);
  font-family:'Cormorant Garamond',Georgia,serif;
  min-height:100vh;overflow-x:hidden;
}
body.locked{overflow:hidden;}

/* ════════════════════════════════════════════
   SHIMMER SKELETON
════════════════════════════════════════════ */
@keyframes shimmer{
  0%{background-position:-400px 0}
  100%{background-position:400px 0}
}
.sk{
  background:linear-gradient(90deg,var(--bg3) 25%,#2e2820 50%,var(--bg3) 75%);
  background-size:800px 100%;
  animation:shimmer 1.6s infinite linear;
  border-radius:5px;
}

/* ════════════════════════════════════════════
   HEADER
════════════════════════════════════════════ */
.menu-header{
  position:sticky;top:0;z-index:90;
  background:rgba(15,13,10,.93);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  padding:0 clamp(1.2rem,5vw,4rem);
  display:flex;align-items:center;justify-content:space-between;
  height:68px;
}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;}
.logo img{height:36px;width:36px;object-fit:contain;}
.logo-text{font-family:'Playfair Display',serif;font-size:1rem;letter-spacing:.08em;color:var(--gold-l);}
.logo-text em{font-style:italic;color:var(--cream);}
.menu-header nav{display:flex;gap:1.75rem;align-items:center;}
.menu-header nav a{color:var(--muted);font-size:.85rem;letter-spacing:.05em;text-decoration:none;text-transform:uppercase;transition:color .2s;}
.menu-header nav a:hover,.menu-header nav a.on{color:var(--gold-l);}
.lang{background:none;border:1px solid var(--border);border-radius:4px;color:var(--muted);font-family:'Cairo',sans-serif;font-size:.82rem;padding:.28rem .7rem;cursor:pointer;transition:all .2s;}
.lang:hover{border-color:var(--gold);color:var(--gold);}
@media(max-width:600px){.menu-header nav{display:none;}}

/* ════════════════════════════════════════════
   MAIN
════════════════════════════════════════════ */
.menu-main{max-width:1280px;margin:0 auto;padding:calc(70px + 2.2rem) clamp(1.2rem,5vw,3rem) 6rem;}

/* MENU CONTEXT */
.menu-context{
  border:1px solid var(--border);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(34,30,24,.75),rgba(28,24,18,.72));
  padding:1rem 1rem 1.2rem;
  margin-bottom:2.2rem;
}
.menu-context-eye{
  font-family:'Cairo',sans-serif;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
}
.menu-context-title{
  font-family:'Playfair Display',serif;
  font-size:1.05rem;
  color:var(--cream);
  margin-top:.2rem;
}
.menu-context-description{
  margin-top:.6rem;
  max-width:62ch;
  color:var(--muted);
  font-family:'Cairo',sans-serif;
  font-size:.84rem;
  line-height:1.8;
}
.menu-context-row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.65rem;
}
.menu-context-links{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1rem;
}
.menu-context-map,
.menu-context-back{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.4rem .8rem;
  color:var(--cream);
  text-decoration:none;
  font-family:'Cairo',sans-serif;
  font-size:.74rem;
}
.menu-context-map:hover,
.menu-context-back:hover{
  color:var(--gold-l);
  border-color:var(--gold);
}
.menu-context-chip{
  border:1px solid var(--border);
  border-radius:999px;
  padding:.12rem .55rem;
  font-family:'Cairo',sans-serif;
  font-size:.68rem;
  color:var(--muted);
  white-space:nowrap;
}
.menu-context-chip b{color:var(--cream);font-weight:600;}

/* TABS */
.cats{
  position:sticky;
  top:70px;
  z-index:80;
  display:flex;
  gap:.2rem;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-bottom:1px solid var(--border);
  margin-bottom:2.2rem;
  padding-top:.15rem;
  background:rgba(15,13,10,.92);
  backdrop-filter:blur(10px);
}
.cats::-webkit-scrollbar{display:none;}
.cat-btn{
  background:none;border:none;cursor:pointer;
  font-family:'Cormorant Garamond',serif;font-size:1.02rem;letter-spacing:.04em;
  color:var(--muted);padding:.65rem 1.15rem;
  flex:0 0 auto;
  white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:all .2s;display:flex;align-items:center;gap:.4rem;
}
.cat-btn .ic{font-size:.95rem;}
.cat-btn:hover{color:var(--gold-l);}
.cat-btn.on{color:var(--gold-l);border-bottom-color:var(--gold);}

/* SECTION */
.cat-sec{display:none;}.cat-sec.vis{display:block;}
.sec-head{display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.4rem;}
.sec-head h2{font-family:'Playfair Display',serif;font-size:1.45rem;font-weight:400;color:var(--cream);}
.sec-head h2 em{color:var(--gold-l);font-style:italic;}
.sec-line{flex:1;height:1px;background:linear-gradient(to right,var(--border),transparent);}

/* GRID */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.15rem;}

/* ── SKELETON CARD ── */
.sk-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;overflow:hidden;
  animation:fadeIn .3s;
}
.sk-card-img{height:170px;}.sk-card-img .sk{height:100%;border-radius:0;}
.sk-card-body{padding:.9rem 1.1rem 1rem;}
.sk-title{height:16px;width:65%;margin-bottom:.55rem;}
.sk-desc{height:11px;width:90%;margin-bottom:.3rem;}
.sk-desc2{height:11px;width:75%;}
.sk-footer{display:flex;justify-content:space-between;align-items:center;margin-top:.85rem;}
.sk-price{height:18px;width:28%;}
.sk-btn{height:30px;width:36%;border-radius:4px;}

/* ── REAL CARD ── */
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:8px;overflow:hidden;cursor:pointer;
  transition:transform .22s,border-color .22s,box-shadow .22s;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(10px);
}
.card.revealed{animation:cardIn .38s cubic-bezier(0.4,0,0.2,1) forwards;}
@keyframes cardIn{to{opacity:1;transform:translateY(0);}}
.card:hover{transform:translateY(-3px)!important;border-color:rgba(201,168,76,.45);box-shadow:0 10px 30px rgba(201,168,76,.09);}
.card-img{position:relative;height:170px;overflow:hidden;}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.card:hover .card-img img{transform:scale(1.06);}
.badge{
  position:absolute;top:8px;left:8px;
  background:var(--gold);color:var(--bg);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.16rem .52rem;border-radius:3px;
}
.card-body{padding:.9rem 1.1rem 1.05rem;flex:1;display:flex;flex-direction:column;}
.card-title{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:400;color:var(--cream);margin-bottom:.28rem;}
.card-desc{font-family:'Cairo',sans-serif;font-size:.76rem;color:var(--muted);line-height:1.6;flex:1;direction:rtl;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-foot{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin-top:.85rem;}
.card-price{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--gold-l);display:inline-flex;align-items:baseline;white-space:nowrap;}
.card-price small{font-size:.65rem;color:var(--muted);margin-right:.18rem;}
.card-price.strike{color:var(--muted);text-decoration:line-through;}
.card-meta-chip{
  border:1px solid var(--border);
  border-radius:999px;
  padding:.12rem .5rem;
  font-family:'Cairo',sans-serif;
  font-size:.63rem;
  color:var(--muted);
  white-space:nowrap;
}
.discount-pill{
  position:absolute;
  right:8px;
  bottom:8px;
  background:rgba(181,69,27,.88);
  color:#fdf7ea;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.16rem .52rem;
  border-radius:999px;
}

/* ════════════════════════════════════════════
   BACKDROP
════════════════════════════════════════════ */
#backdrop{
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(5px);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s;
}
#backdrop.open{opacity:1;pointer-events:all;}
#backdrop.dragging{transition:none;}

/* ════════════════════════════════════════════
   BOTTOM SHEET  — item details style
════════════════════════════════════════════ */
#sheet{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:0 auto;
  width:min(100%,480px);
  max-height:min(90vh,740px);
  z-index:201;
  border-radius:20px 20px 0 0;
  border:1px solid var(--border);
  border-bottom:none;
  background:linear-gradient(180deg,#1b1711,#120f0c);
  transform:translateY(100%);
  transition:transform .42s cubic-bezier(.22,1,.36,1), border-radius .28s ease;
  overflow:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  will-change:transform;
  overscroll-behavior:contain;
}
#sheet::-webkit-scrollbar{display:none;}
#backdrop.open #sheet{transform:translateY(0);}
#sheet.dragging{transition:none!important;}
#sheet.full{border-radius:16px 16px 0 0;}

.sheet-handle{
  width:44px;
  height:4px;
  border-radius:999px;
  background:#4f4538;
  margin:10px auto 12px;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.sheet-handle:active{cursor:grabbing;}

.sheet-head{
  position:relative;
  margin:0 14px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  min-height:190px;
  background:#211c15;
  touch-action:none;
}
.sheet-image{width:100%;height:190px;object-fit:cover;display:block;opacity:1;transition:opacity .14s ease;}
.sheet-image.is-switching{opacity:.74;}

.close-sheet{
  position:absolute;
  right:10px;
  top:10px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(15,13,10,.7);
  color:var(--cream);
  cursor:pointer;
}

.sheet-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid var(--border);
  background:rgba(15,13,10,.7);
  color:var(--cream);
  cursor:pointer;
}
.sheet-nav.left{left:10px;}
.sheet-nav.right{right:10px;}
.sheet-nav[hidden]{display:none;}

.thumbs{display:none;gap:6px;overflow-x:auto;padding:10px 14px 0;scrollbar-width:none;}
.thumbs::-webkit-scrollbar{display:none;}
.thumbs.show{display:flex;}
.thumb{width:56px;height:44px;border-radius:8px;border:1px solid var(--border);overflow:hidden;opacity:.72;cursor:pointer;flex:0 0 auto;}
.thumb.active{opacity:1;border-color:var(--gold);}
.thumb img{width:100%;height:100%;object-fit:cover;}

.sheet-body{padding:14px;color:var(--cream);}
.sheet-name{font-family:'Playfair Display',serif;font-size:26px;margin-bottom:4px;}
.sheet-desc{color:#aa9d89;font-size:13px;line-height:1.6;margin-bottom:14px;}

.opt-label{
  display:block;
  margin-bottom:8px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-family:'Cormorant Garamond',serif;
}

.sizes,.adds{margin-bottom:14px;}
.size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.size-option,.add-option{border:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,.01);transition:.2s;cursor:pointer;}
.size-option input,.add-option input{display:none;}
.size-option{text-align:center;padding:9px 6px;font-size:12px;}
.size-option strong{display:block;color:var(--cream);font-size:13px;margin-bottom:2px;font-family:'Playfair Display',serif;font-weight:600;}
.size-option span{color:var(--gold-l);font-size:11px;}
.size-option.selected,.add-option.checked{border-color:var(--gold);background:rgba(201,168,76,.1);}

.add-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.add-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;color:var(--cream);font-size:12px;}
.add-price{color:var(--gold-l);font-family:'Playfair Display',serif;font-size:14px;}

.sheet-footer{border-top:1px solid var(--border);padding-top:12px;padding-bottom:2px;}
.price-note{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em;}
.total{font-family:'Playfair Display',serif;font-size:28px;color:var(--gold-l);line-height:1;margin-top:4px;}

@media(min-width:800px){
  #sheet{width:min(90vw,620px);}
  .sheet-image{height:240px;}
}

@media(max-width:430px){.add-grid{grid-template-columns:1fr;}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .sheet-image{transition:none!important;}
}

/* ════════════════════════════════════════════
   MISC UTILS
════════════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}