/* Shared café ordering styles — item cards + customization modal.
   Used by menu.html and section.html. Depends on branch.css design tokens
   (--brown, --brown-deep, --red, --cream, --line). */

/* ---- Menu layout (full menu page only) ---- */
.bx-pagehead { margin-bottom: 32px; }
.mn-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
.mn-rail { position: sticky; top: 18px; border: 1px solid var(--line); border-radius: 8px; padding: 14px; background: #fff; max-height: calc(100vh - 36px); overflow: auto; }
.mn-rail h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0; color: #8a7a6e; margin: 6px 8px 10px; }
.mn-rail a { display: block; padding: 8px 10px; border-radius: 4px; font-size: 14px; font-weight: 700; color: var(--brown); text-decoration: none; }
.mn-rail a:hover { background: var(--cream); color: var(--red); }
.mn-rail a.is-active { background: var(--brown); color: #fff; }

.mn-cat { scroll-margin-top: 18px; margin-bottom: 44px; }
.mn-cat h2 { font-size: 24px; color: var(--brown); margin: 0 0 4px; font-weight: 700; }
.mn-cat__rule { height: 2px; background: var(--line); margin: 0 0 18px; }

/* ---- Item cards ---- */
.mn-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr)); gap: 16px; }
.mn-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  min-height: 148px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow .15s, transform .15s;
}
.mn-item--photo { grid-template-columns: 104px minmax(0, 1fr) auto; }
.mn-item:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.mn-item:disabled { cursor: default; opacity: .55; }
.mn-item:disabled:hover { box-shadow: none; transform: none; }
.mn-item__main { flex: 1; min-width: 0; }
.mn-item__thumb { width: 104px; height: 104px; border-radius: 6px; overflow: hidden; background: var(--cream); }
.mn-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-item__name { font-size: 16px; font-weight: 800; color: var(--brown-deep); margin: 0 0 7px; line-height: 1.28; }
.mn-item__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 13px;
  color: #6a584c;
  line-height: 1.45;
  margin: 0;
}
.mn-item__right {
  min-width: 74px;
  text-align: right;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.mn-item__price { font-size: 16px; font-weight: 800; color: var(--brown-deep); }
.mn-item__from { font-size: 11px; color: #8a7a6e; font-weight: 700; }
.mn-item__oos { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--red); }
.mn-item__add {
  display: inline-flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  position: relative;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--red);
  border-radius: 4px;
  color: var(--red);
  font-size: 12px;
  font-weight: 800;
  transition: color .2s ease, border-color .2s ease;
}
.mn-item__add::after {
  content: "";
  position: absolute;
  width: 110%;
  height: 110%;
  left: -5%;
  top: -5%;
  z-index: -1;
  background: var(--red);
  clip-path: path("M179.662 1.38283e-05C197 1.38283e-05 206.5 -0.000104904 210 -0.000104904L0 -0.000183105C4 -0.000174046 24.5 -0.000155926 45.1844 -0.000173807C88 -0.000173807 115.5 -0.00014782 122.643 -0.00014782C135.5 -0.00014782 161.5 1.81198e-05 179.662 1.38283e-05Z");
  pointer-events: none;
}
.mn-item:hover .mn-item__add,
.mn-item__add.bx-btn__mouseover {
  color: #fff;
  border-color: var(--red);
}
.mn-item:hover .mn-item__add::after,
.mn-item__add.bx-btn__mouseover::after {
  animation: mouseoveranimation .6s linear forwards;
}
.mn-item__add.bx-btn__mouseout::after {
  animation: mouseoutanimation .6s linear;
}

/* ---- Customization modal ---- */
.mn-modal { position: fixed; inset: 0; z-index: 60; display: none; }
.mn-modal.is-open { display: block; }
.mn-modal__scrim { position: absolute; inset: 0; background: rgba(40,26,17,.5); }
.mn-modal__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 100%); background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,.2); display: flex; flex-direction: column; }
.mn-modal__hero { width: 100%; height: 220px; background: var(--cream); overflow: hidden; }
.mn-modal__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-modal__head { padding: 22px 24px 16px; border-bottom: 1px solid var(--line); position: relative; }
.mn-modal__head h2 { margin: 0 0 4px; font-size: 22px; color: var(--brown-deep); }
.mn-modal__head p { margin: 0; font-size: 13px; color: #6a584c; line-height: 1.4; }
.mn-modal__close { position: absolute; top: 16px; right: 18px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--brown); cursor: pointer; }
.mn-modal__body { padding: 18px 24px; overflow: auto; flex: 1; }
.mn-group { margin-bottom: 22px; }
.mn-group__label { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.mn-group__label h3 { margin: 0; font-size: 14px; color: var(--brown-deep); }
.mn-group__req { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--red); }
.mn-group__opt { font-size: 11px; color: #8a7a6e; }
.mn-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; cursor: pointer; font-size: 14px; background: #fff; }
.mn-opt:hover { border-color: var(--brown); }
.mn-opt input { accent-color: var(--red); margin-right: 8px; }
.mn-opt__name { display: flex; align-items: center; }
.mn-opt__price { font-size: 13px; color: #6a584c; font-weight: 700; }
.mn-modal__foot { border-top: 1px solid var(--line); padding: 16px 24px; display: flex; align-items: center; gap: 14px; }
.mn-modal__foot .bx-qty { margin: 0; }
.mn-modal__foot .bx-btn { flex: 1; justify-content: center; }

@media (max-width: 860px) {
  .mn-layout { grid-template-columns: 1fr; }
  .mn-rail { position: static; max-height: none; display: flex; flex-wrap: wrap; gap: 6px; }
  .mn-rail h2 { width: 100%; }
}

@media (max-width: 560px) {
  .mn-item,
  .mn-item--photo {
    grid-template-columns: 76px minmax(0, 1fr);
    min-height: 0;
    gap: 12px;
    padding: 14px;
  }
  .mn-item:not(.mn-item--photo) { grid-template-columns: minmax(0, 1fr); }
  .mn-item__thumb { width: 76px; height: 76px; }
  .mn-item__right {
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
    margin-top: 2px;
  }
  .mn-item:not(.mn-item--photo) .mn-item__right { grid-column: 1; }
}