/* Single Party Package page.
   The layout — media frame, detail grid, options card, related grid, mobile
   order bar — comes from css/single-food.css, which this page loads first.
   Only the package-specific pieces live here: the price block and the
   includes list, where each line pairs an item with the choice the customer
   makes alongside it. */

/* Price and serves, the two facts a customer checks first. */
.pkg-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  margin: 0 0 18px;
}
.pkg-price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.05;
  color: var(--brand-primary);
  margin: 0;
}
.pkg-serves {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-secondary-ink);
}
.pkg-serves svg {
  flex: 0 0 auto;
}

/* The included list. Green accent on the left, matching the add-ons card on
   the food pages, because this is what you get rather than reference text. */
.pkg-options {
  background: var(--surface-sunken);
  border-left: 3px solid var(--brand-secondary);
  box-shadow: none;
}
.pkg-includes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pkg-include {
  position: relative;
  padding: 10px 0 10px 26px;
}
.pkg-include + .pkg-include {
  border-top: 1px solid var(--border-subtle);
}
.pkg-include::before {
  /* A check, not a bullet: every line is something included, not a choice
     still to be made. */
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--brand-secondary);
  border-bottom: 2px solid var(--brand-secondary);
  transform: rotate(-45deg);
}
.pkg-include-item {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--ink-900);
}
.pkg-include-choice {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-700);
}

.pkg-notes {
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-700);
}

.pkg-back {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
}
.pkg-back a {
  color: var(--brand-primary);
  font-weight: 700;
}

@media (max-width: 640px) {
  .pkg-price {
    font-size: 32px;
  }
}