/* ===========================================================
   Pizzeria Bella Donna — menu page
   Editorial, readable and built from the same visual language
   as the rest of the site.
   =========================================================== */

.menu-page{
  background:var(--cream-200);
  color:var(--ink);
  position:relative;
  overflow:hidden;
  padding:clamp(3.4rem,7vw,5.6rem) 0 clamp(4rem,8vw,7rem);
}
.menu-page::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:430px;
  background:
    radial-gradient(circle at 82% 10%,rgba(203,162,63,.16),transparent 30%),
    linear-gradient(145deg,var(--green-700),var(--green-900));
}
.menu-page::after{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:430px;
  opacity:.32;
  pointer-events:none;
  background-image:radial-gradient(rgba(224,192,116,.22) 1px,transparent 1px);
  background-size:28px 28px;
}
.menu-page .wrap{position:relative;z-index:2;min-width:0}

/* ---- intro ---- */
.menu-hero{
  text-align:center;
  max-width:760px;
  margin:0 auto clamp(2.4rem,5vw,3.8rem);
}
.menu-hero h1{
  font-size:clamp(3.2rem,8vw,6.2rem);
  color:var(--cream);
  margin:.75rem 0 1rem;
  letter-spacing:-.045em;
}
.menu-hero p{
  color:rgba(245,239,224,.75);
  font-size:clamp(1rem,2vw,1.16rem);
  max-width:58ch;
  margin-inline:auto;
}

/* ---- menu promise ---- */
.menu-promise{
  max-width:820px;
  margin:0 auto clamp(2rem,5vw,3.5rem);
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(1rem,4vw,2.4rem);
  padding:1.25rem 2rem;
  text-align:center;
  color:var(--green-900);
  background:var(--mustard);
  border:1px solid rgba(16,26,20,.22);
  border-radius:20px;
  box-shadow:0 22px 55px -30px rgba(16,26,20,.75);
}
.menu-promise p{
  font-family:var(--serif);
  font-size:clamp(1.08rem,2.4vw,1.38rem);
  font-weight:900;
  line-height:1.25;
}
.menu-promise small{
  display:block;
  margin-bottom:.2rem;
  font-family:var(--sans);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.65;
}
.promise-mark{font-size:1.1rem;opacity:.55}

/* ---- layout / category index ---- */
.menu-shell{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:clamp(1.5rem,3vw,2.8rem);
  align-items:start;
  min-width:0;
}
.menu-aside{
  position:sticky;
  top:96px;
  padding:1.45rem;
  color:var(--cream);
  background:var(--green-700);
  border:1px solid rgba(203,162,63,.3);
  border-radius:18px;
  box-shadow:var(--shadow);
  min-width:0;
  max-width:100%;
}
.menu-aside-title{
  margin-bottom:.8rem;
  padding-bottom:.8rem;
  border-bottom:1px solid rgba(245,239,224,.14);
  color:var(--mustard-300);
  font-family:var(--serif);
  font-size:1.08rem;
  font-weight:900;
}
.menu-jump{display:grid;min-width:0;max-width:100%}
.menu-jump a{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.46rem 0;
  color:rgba(245,239,224,.72);
  font-size:.86rem;
  font-weight:600;
  line-height:1.2;
  transition:color .25s,transform .25s;
}
.menu-jump a span{
  min-width:1.55rem;
  color:var(--mustard);
  font-family:var(--serif);
  font-size:.74rem;
  font-weight:900;
}
.menu-jump a:hover{color:var(--cream);transform:translateX(4px)}
.menu-callout{
  margin-top:1.1rem;
  padding-top:1rem;
  border-top:1px solid rgba(245,239,224,.14);
}
.menu-callout span,.menu-callout small{display:block}
.menu-callout span{
  color:rgba(245,239,224,.55);
  font-size:.65rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.menu-callout a{
  display:inline-block;
  margin:.15rem 0;
  color:var(--mustard-300);
  font-family:var(--serif);
  font-size:1.25rem;
  font-weight:900;
}
.menu-callout small{color:rgba(245,239,224,.55);font-size:.74rem}
.menu-content{min-width:0}

/* ---- category cards ---- */
.cat{
  scroll-margin-top:92px;
  margin-bottom:1.35rem;
  padding:clamp(1.25rem,3vw,2rem);
  background:rgba(255,252,245,.74);
  border:1px solid rgba(20,32,26,.13);
  border-radius:22px;
  box-shadow:0 18px 45px -38px rgba(16,26,20,.75);
}
.cat-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1.2rem;
  padding-bottom:1.25rem;
  margin-bottom:.35rem;
  border-bottom:1px solid rgba(20,32,26,.13);
}
.cat-heading{display:flex;gap:1rem;min-width:0}
.cat-index{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  color:var(--mustard-600);
  border:1px solid rgba(168,132,44,.4);
  border-radius:50%;
  font-family:var(--serif);
  font-size:.82rem;
  font-weight:900;
}
.cat-kicker{
  display:block;
  margin-bottom:.18rem;
  color:var(--mustard-600);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.cat-head h2{
  color:var(--green-700);
  font-size:clamp(1.65rem,3.6vw,2.35rem);
  letter-spacing:-.025em;
}
.cat-summary{
  max-width:52ch;
  margin-top:.35rem;
  color:rgba(25,35,27,.62);
  font-size:.9rem;
  line-height:1.45;
}
.cat-prices{display:flex;gap:.55rem;flex:none}
.price-badge{
  min-width:78px;
  padding:.5rem .7rem;
  text-align:center;
  color:var(--green-900);
  background:rgba(203,162,63,.15);
  border:1px solid rgba(168,132,44,.3);
  border-radius:12px;
}
.price-badge small,.price-badge strong{display:block}
.price-badge small{
  color:rgba(25,35,27,.56);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.price-badge strong{
  margin-top:.05rem;
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.1;
}
.cat-note{
  margin:.95rem 0 .3rem;
  padding:.75rem 1rem;
  color:rgba(25,35,27,.68);
  background:rgba(111,126,60,.08);
  border-left:3px solid var(--olive);
  border-radius:0 10px 10px 0;
  font-size:.86rem;
  font-style:italic;
}

/* ---- dishes ---- */
.items{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 1.7rem;
  list-style:none;
}
.items--plain{grid-template-columns:1fr}
.item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.72rem;
  align-items:start;
  padding:.9rem .15rem;
  border-bottom:1px dashed rgba(20,32,26,.16);
}
.item.has-image{grid-template-columns:auto 64px minmax(0,1fr) auto}
.item:hover .item-name{color:var(--mustard-600)}
.item-photo{
  width:64px;
  height:64px;
  overflow:hidden;
  border:1px solid rgba(168,132,44,.28);
  border-radius:14px;
  background:rgba(203,162,63,.12);
  box-shadow:0 12px 26px -22px rgba(16,26,20,.7);
}
.item-photo img{width:100%;height:100%;object-fit:cover}
.item-nr{
  min-width:1.55rem;
  color:rgba(168,132,44,.72);
  font-family:var(--serif);
  font-size:.84rem;
  font-weight:900;
  line-height:1.55;
}
.item-body{min-width:0}
.item-title{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.item-name{
  color:var(--green-800);
  font-size:.96rem;
  font-weight:800;
  transition:color .2s;
}
.item-tag{
  padding:.12rem .42rem;
  color:var(--green-900);
  background:var(--mustard);
  border-radius:100px;
  font-size:.52rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.item-ing{
  display:block;
  margin-top:.14rem;
  color:rgba(25,35,27,.56);
  font-size:.78rem;
  font-style:italic;
  line-height:1.4;
}
.item-price{
  padding-top:.05rem;
  color:var(--green-700);
  font-family:var(--serif);
  font-size:.9rem;
  font-weight:900;
  white-space:nowrap;
}
.item--plain{grid-template-columns:minmax(0,1fr) auto;padding-inline:.2rem}
.item--plain.has-image{grid-template-columns:64px minmax(0,1fr) auto}
.item--plain .item-name{font-size:1rem}

/* ---- pan pizza table ---- */
.cat-table-wrap{margin-top:.8rem;overflow-x:auto}
.cat-table{width:100%;border-collapse:collapse;min-width:500px}
.cat-table th{
  padding:.7rem .85rem;
  color:var(--mustard-600);
  border-bottom:2px solid rgba(168,132,44,.3);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.12em;
  text-align:center;
  text-transform:uppercase;
}
.cat-table td{
  padding:.85rem;
  color:var(--green-700);
  border-bottom:1px dashed rgba(20,32,26,.16);
  font-family:var(--serif);
  font-size:1rem;
  font-weight:900;
  text-align:center;
}
.cat-table .lbl{
  color:rgba(25,35,27,.72);
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:700;
  text-align:left;
}

/* ---- practical info ---- */
.menu-details{
  margin-top:clamp(3rem,7vw,5rem);
  padding:clamp(2rem,5vw,3.4rem);
  color:var(--cream);
  background:var(--green-700);
  border-radius:26px;
  box-shadow:var(--shadow);
}
.menu-details-head{text-align:center;margin-bottom:2rem}
.menu-details-head .eyebrow{color:var(--mustard-300)}
.menu-details-head h2{
  margin-top:.55rem;
  color:var(--cream);
  font-size:clamp(1.8rem,4vw,2.7rem);
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.info-card-sm{
  padding:1.35rem;
  background:rgba(245,239,224,.06);
  border:1px solid rgba(245,239,224,.13);
  border-radius:16px;
}
.info-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:.8rem;
}
.info-card-sm h3{color:var(--cream);font-size:1.12rem}
.info-price{color:var(--mustard-300);font-family:var(--serif);font-size:1.28rem;font-weight:900}
.info-card-sm ul{display:grid;gap:.4rem;list-style:none}
.info-card-sm li{
  position:relative;
  padding-left:.9rem;
  color:rgba(245,239,224,.7);
  font-size:.84rem;
}
.info-card-sm li::before{
  content:"";
  position:absolute;
  top:.58rem;
  left:0;
  width:4px;
  height:4px;
  background:var(--mustard);
  border-radius:50%;
}

/* ---- final order CTA ---- */
.menu-order{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.3rem;
  flex-wrap:wrap;
  margin-top:2rem;
  padding:1.4rem;
  color:var(--cream);
  background:var(--green-900);
  border-radius:18px;
}
.menu-order p{color:rgba(245,239,224,.76);font-size:1rem}

@media(max-width:960px){
  .menu-shell{grid-template-columns:minmax(0,1fr)}
  .menu-aside{position:relative;top:auto;padding:1.1rem 1.25rem}
  .menu-aside-title{margin-bottom:.65rem;padding-bottom:.65rem}
  .menu-jump{grid-template-columns:repeat(3,minmax(0,1fr));gap:.1rem 1rem}
  .menu-callout{display:none}
}
@media(max-width:700px){
  .menu-page::before,.menu-page::after{height:390px}
  .menu-promise{padding:1rem 1.2rem;border-radius:16px}
  .promise-mark{display:none}
  .menu-jump{
    display:flex;
    gap:.5rem;
    width:100%;
    min-width:0;
    max-width:100%;
    overflow-x:auto;
    padding-bottom:.3rem;
    scrollbar-width:none;
  }
  .menu-jump::-webkit-scrollbar{display:none}
  .menu-jump a{
    flex:none;
    padding:.42rem .7rem;
    border:1px solid rgba(245,239,224,.16);
    border-radius:100px;
  }
  .menu-jump a:hover{transform:none}
  .cat{padding:1.15rem;border-radius:17px}
  .cat-head{display:block}
  .cat-heading{gap:.7rem}
  .cat-index{flex-basis:36px;width:36px;height:36px}
  .cat-prices{margin-top:1rem;padding-left:2.7rem}
  .price-badge{min-width:88px}
  .items{grid-template-columns:1fr}
  .info-grid{grid-template-columns:1fr}
  .menu-order{text-align:center}
}
@media(max-width:430px){
  .menu-hero h1{font-size:3rem}
  .cat-prices{padding-left:0}
  .cat-summary{font-size:.84rem}
  .item{gap:.55rem}
  .item.has-image{grid-template-columns:50px minmax(0,1fr) auto}
  .item.has-image .item-nr{display:none}
  .item--plain.has-image{grid-template-columns:50px minmax(0,1fr) auto}
  .item-photo{width:50px;height:50px;border-radius:12px}
  .item-nr{min-width:1.35rem}
  .item-name{font-size:.91rem}
  .item-ing{font-size:.74rem}
  .item-price{font-size:.84rem}
}