/* ============================
   /css/menu-products.css (clean)
   ============================ */

/* Host + knobs */
#menu-product{
  width: 100%;
  overflow: hidden;
  --mp-nonact: var(--color-nonact, #153b8e);
  --mp-act:    var(--color-act,    #0f2c6d);
  --mp-list-max: 200px;  /* column width */
  --mp-btnw: 97%;        /* button width inside row */
}

/* Header */
#menu-product #menu-product-header{
  background: var(--color-nonact, #153b8e); /* url(../images/20250702161313_499128778.jpg); */
  height: 36px;
  text-align: center;
  color: #FFF;
  padding-top: 10px;
  font-size: 19px;
  width: var(--mp-list-max);
  margin: 0 auto;
}

/* Framing container */
#menu-product #menu-product-container{
  box-sizing: border-box;
  width: var(--mp-list-max);
  margin: 0 auto;
  border: 7px solid var(--mp-nonact);
  border-bottom: none;
  border-top: none;
  position: relative;   /* keep for future decals if needed */
  overflow: visible;
}

/* List wrapper */
#menu-product #menu-product-list{
  width: 100%;
  margin: 0 auto;
  background: #ffffff;
  padding: 4px 0 0;     /* no bottom padding (snug to dongle) */
  overflow: hidden;
}
#menu-product #menu-product-list ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rows + centered wrapper */
#menu-product :where(.mp-item){
  position: relative;
  width: 100%;
  margin: 3px 0;
  font-size: 11px;
  color: #ddd;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.3s ease;
}
#menu-product :where(.mp-wrap){
  display: inline-block;
  position: relative;
  width: var(--mp-btnw); /* tweak 92–96% to taste */
}

/* Button */
#menu-product :where(.mp-btn){
  display: block;
  width: 100%;
  line-height: 34px;
  padding: 0 12px;
  box-sizing: border-box;
  background: var(--mp-nonact, #153b8e);
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#menu-product :where(.mp-btn:hover, .mp-btn:focus),
#menu-product :where(.mp-btn.active){
  background: var(--mp-act, #0f2c6d);
  font-weight: bold;
}

/* Arms: fully disabled (remove visual dashes) */
#menu-product :where(.mp-arm){ display: none !important; }

/* Dongle */
#menu-product #menu-product-dongle{
  width: var(--mp-list-max);
  margin: 0 auto;
}
#menu-product #menu-product-dongle img{
  display: block;
  width: 100%;
  height: auto;
}