/* قالب‌های منوی مشتری. رنگ‌ها از متغیرهای همان کافه می‌آیند. */

.tpl-switch{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  gap:.5rem;
  justify-content:center;
  flex-wrap:wrap;
  padding:.65rem .75rem;
  background:rgba(var(--bg-rgb), .92);
  border-bottom:1px solid var(--line);
}
.tpl-switch a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.75rem;
  padding:.4rem .9rem;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--cream);
  text-decoration:none;
  font-size:.85rem;
  font-weight:700;
}
.tpl-switch a.on{
  background:var(--gold);
  color:var(--on-gold, #1c1c1c);
  border-color:transparent;
}
.menu-dock{
  position:sticky;
  top:0;
  z-index:40;
}
.menu-dock .tpl-switch,
.menu-dock .navbar{
  position:static;
  top:auto;
}

body.tpl-featured .hero.has-cover{
  background:
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.55)),
    var(--cover) center/cover no-repeat,
    var(--bg);
}
body.tpl-featured .hero.has-cover::before{opacity:.35;}
body.tpl-featured .hero > *:not(.back-link):not(.scroll-cue){position:relative; z-index:1;}
body.tpl-featured .hero > .back-link,
body.tpl-featured .hero > .scroll-cue{z-index:2;}

/* متنی: منوی حروفی. اسم و قیمت یک خط، توضیح زیرش، بدون عکس و بدون کارت. */
body.tpl-text .brand-mark,
body.tpl-text .stamp,
body.tpl-text .card-media,
body.tpl-text .icon-badge,
body.tpl-text .scroll-cue{display:none;}
body.tpl-text .hero{min-height:auto; padding:56px 20px 18px;}
body.tpl-text .section-head{
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
  margin-bottom:4px;
}
body.tpl-text .grid{display:flex; flex-direction:column; gap:0;}
body.tpl-text .card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  grid-template-areas:"title price" "desc desc";
  column-gap:12px;
  align-items:baseline;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:13px 2px 12px;
}
body.tpl-text .card:hover{transform:none; background:transparent; border-color:var(--line);}
body.tpl-text .card-body{display:contents;}
body.tpl-text .card h3{grid-area:title; font-size:1.08rem; font-weight:700;}
body.tpl-text .card p{
  grid-area:desc;
  min-height:0;
  margin-top:4px;
  font-size:.78rem;
}
body.tpl-text .card .price{
  grid-area:price;
  margin:0;
  padding:0;
  border:0;
  align-items:center;
  gap:8px;
}
body.tpl-text .card .price b{font-size:1rem;}

/* ویژه: یک غذای بزرگ، بقیه ردیف فشرده با عکس کوچک. */
body.tpl-featured .grid{grid-template-columns:1fr; gap:0;}
body.tpl-featured .card.is-featured{
  grid-column:1 / -1;
  margin-bottom:8px;
  border-radius:22px;
}
body.tpl-featured .card.is-featured .card-media{aspect-ratio:16/10;}
body.tpl-featured .card.is-featured h3{font-size:1.35rem;}
body.tpl-featured .card:not(.is-featured){
  display:grid;
  grid-template-columns:4.25rem minmax(0, 1fr) auto;
  grid-template-areas:"thumb title price" "thumb desc price";
  column-gap:12px;
  align-items:center;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  padding:10px 0;
}
body.tpl-featured .card:not(.is-featured):hover{
  transform:none;
  background:transparent;
  border-color:var(--line);
}
body.tpl-featured .card:not(.is-featured) .card-media,
body.tpl-featured .card:not(.is-featured) .icon-badge{
  grid-area:thumb;
  width:4.25rem;
  height:4.25rem;
  margin:0;
  aspect-ratio:1;
  border-radius:14px;
}
body.tpl-featured .card:not(.is-featured) .card-body{display:contents;}
body.tpl-featured .card:not(.is-featured) h3{
  grid-area:title;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.tpl-featured .card:not(.is-featured) p{
  grid-area:desc;
  min-height:0;
  min-width:0;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
body.tpl-featured .card:not(.is-featured) .price{
  grid-area:price;
  margin:0;
  padding:0;
  border:0;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

@media (max-width:420px){
  body.tpl-featured .card:not(.is-featured){grid-template-columns:3.5rem minmax(0, 1fr) auto;}
  body.tpl-featured .card:not(.is-featured) .card-media,
  body.tpl-featured .card:not(.is-featured) .icon-badge{width:3.5rem; height:3.5rem;}
}

.feat-flag{display:none;}

/* کارتی: عکس‌ها هم‌اندازه. رنگ از تنظیمات خود کافه می‌آید. */
body.tpl-card .hero{
  min-height:auto;
  padding:52px 20px 28px;
  background:
    radial-gradient(42% 80% at 50% 0%, rgba(200, 155, 92, .22), transparent 72%),
    var(--bg);
}
body.tpl-card .hero::before{opacity:.28;}
body.tpl-card .scroll-cue{display:none;}
body.tpl-card .brand-mark{width:92px; height:92px; margin-bottom:12px;}
body.tpl-card .ring-stain.small{border-color:var(--gold);}
body.tpl-card .grid{gap:16px;}
body.tpl-card .card{
  border:0;
  box-shadow:var(--shadow);
  border-radius:22px;
}
body.tpl-card .card-media{aspect-ratio:1 / 1;}
body.tpl-card .card h3{font-size:1.02rem;}
body.tpl-card .card .price b{color:var(--price-accent, var(--gold));}
body.tpl-card .section-head h2{letter-spacing:-.02em;}
body.tpl-card .stamp{border-radius:50%; box-shadow:var(--shadow);}

/* ویژه: جلد، یک غذای بزرگ، بقیه فهرست فشرده. رنگ از تنظیمات خود کافه می‌آید. */
body.tpl-featured .hero{min-height:68svh;}
body.tpl-featured .brand-mark{width:108px; height:108px;}
body.tpl-featured .ring-stain,
body.tpl-featured .steam{display:none;}
body.tpl-featured .brand-cup{
  border-radius:22px;
  border:2px solid var(--gold-hi);
  box-shadow:0 12px 30px rgba(0, 0, 0, .35);
}
body.tpl-featured .stamp{display:none;}
body.tpl-featured .section-head{
  border-bottom:1px solid var(--line);
  padding-bottom:8px;
}
body.tpl-featured .section-head h2{font-size:1.35rem;}
body.tpl-featured .card.is-featured{
  background:var(--card);
  border:1px solid var(--gold);
  box-shadow:var(--shadow);
  overflow:hidden;
}
body.tpl-featured .card.is-featured .feat-flag{
  display:inline-flex;
  position:absolute;
  top:12px;
  inset-inline-start:12px;
  z-index:2;
  background:var(--gold-hi);
  color:var(--on-gold-hi);
  font-size:.75rem;
  font-weight:800;
  padding:5px 12px;
  border-radius:999px;
}
body.tpl-featured .card.is-featured .card-media{
  aspect-ratio:16 / 9;
  max-height:22rem;
}
body.tpl-featured .scroll-cue{
  color:var(--cream);
  text-shadow:0 1px 8px rgba(0,0,0,.45);
  white-space:nowrap;
}
body.tpl-featured .card.is-featured h3{font-size:1.45rem;}
body.tpl-featured .card.is-featured .price b{color:var(--price-accent, var(--gold-hi)); font-size:1.25rem;}