.drinks-page { --order-control-size: 2.5rem; }

.drinks-page .site-header {
  position: sticky;
  top: 0;
  box-shadow: 0 1px 0 rgb(0 56 59 / .12);
}

.drinks-page :is(main, section, h3)[id] { scroll-margin-top: 7.25rem; }

.cart-trigger {
  --button-bg: var(--deep);
  --button-ink: var(--paper);
  gap: .4rem;
}

.cart-trigger-icon {
  flex: none;
  width: 1.18rem;
  height: 1.18rem;
}

.cart-trigger [data-cart-count] {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  min-height: 1.4rem;
  padding-inline: .25rem;
  border-radius: 99rem;
  background: var(--yellow);
  color: var(--deep);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

.menu-order {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: .5rem .65rem;
  min-width: 0;
  margin: 0;
}

.food-item-with-photo > .menu-order { grid-column: 2 / -1; }

.menu-order-choice {
  display: grid;
  flex: 1 1 9rem;
  gap: .22rem;
  min-width: 0;
  color: var(--menu-heading);
  font-size: .8rem;
  font-weight: 700;
}

.menu-order-choice select,
.cart-form :is(input, textarea) {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: .48rem .62rem;
  border: 1px solid #8eaba6;
  border-radius: .42rem;
  background: #fffefa;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.menu-order-choice select {
  height: var(--order-control-size);
  min-height: var(--order-control-size);
  padding-block: .35rem;
  cursor: pointer;
}

.menu-order-pick {
  --button-bg: #eef4ee;
  --button-ink: var(--teal);
  min-height: var(--order-control-size);
  padding: .35rem .72rem;
  border: 1px solid #aac5bc;
  border-radius: .45rem;
  font-size: .86rem;
  font-weight: 800;
}

.menu-order-actions {
  display: grid;
  grid-template-columns: auto 2rem;
  flex: none;
  align-items: center;
  gap: .25rem;
  margin-inline-start: auto;
}

.menu-order-add {
  --button-bg: #eef4ee;
  --button-ink: var(--teal);
  gap: .28rem;
  min-height: var(--order-control-size);
  padding: .2rem .72rem;
  border: 1px solid #aac5bc;
  border-radius: 2rem;
  font-size: .88rem;
  font-weight: 800;
  white-space: nowrap;
}

.menu-order-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.05rem;
  min-height: 1.05rem;
  padding-inline: .2rem;
  border-radius: .28rem;
  background: var(--deep);
  color: var(--paper);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
}

.menu-order-remove {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #e9c4b8;
  border-radius: 50%;
  background: #fff3ed;
  color: #a13423;
  cursor: pointer;
}

.menu-order-remove:hover { background: #f8dfd3; }

.menu-order-set {
  align-items: end;
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--menu-rule);
  border-radius: .55rem;
  background: var(--menu-panel);
}

.menu-order-set-extras {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: .55rem .65rem;
  min-width: 0;
  margin: 0;
  padding: .6rem 0 0;
  border: 0;
}

.menu-order-set-extras legend {
  padding: 0;
  color: var(--menu-heading);
  font-weight: 800;
}

.detail-dialog:has(.macaw-cart) {
  width: min(42rem, calc(100% - 1.5rem));
  max-height: calc(100% - 1.5rem);
  overscroll-behavior: contain;
}

.drinks-page:has(.detail-dialog[open] .macaw-cart) { overflow: hidden; }

.cart-delivery-banner {
  display: flex;
  align-items: center;
  gap: .72rem;
  padding: .6rem .75rem;
  border: 1px solid #b9d4ca;
  border-radius: .5rem;
  background: #e8f4ec;
  color: var(--deep);
}

.cart-delivery-banner svg { flex: none; color: var(--teal); }
.cart-delivery-banner strong, .cart-delivery-banner span { display: block; }
.cart-delivery-banner span { font-size: .85rem; }

.cart-note, .cart-empty { color: var(--menu-muted); }

.cart-note { font-size: .91rem; }

.cart-items {
  display: grid;
  gap: .42rem;
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
}

.cart-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .3rem .7rem;
  min-width: 0;
  padding: .65rem .75rem;
  border: 1px solid var(--menu-rule);
  border-radius: .52rem;
  background: var(--menu-panel);
}

.cart-item-copy {
  display: grid;
  flex: 1 1 11rem;
  gap: .12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.cart-item-copy strong { color: var(--deep); }
.cart-item-copy small { color: var(--menu-muted); }

.cart-item-actions, .cart-quantity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .28rem;
}

.cart-quantity > span {
  min-width: 2ch;
  color: var(--deep);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.cart-quantity button, .cart-remove {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .2rem .38rem;
  border: 1px solid #aac5bc;
  border-radius: .42rem;
  background: var(--paper);
  color: var(--teal);
  cursor: pointer;
  font-weight: 750;
}

.cart-quantity button {
  min-width: var(--order-control-size);
  min-height: var(--order-control-size);
  border-radius: 50%;
  background: #eef4ee;
  font-size: 1.13rem;
}
.cart-remove { border-color: transparent; background: transparent; font-size: .78rem; text-decoration: underline; }
.cart-quantity button:hover, .cart-remove:hover { background: #edf4ee; }

.cart-total {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-block: .75rem;
  padding: .65rem .75rem;
  border-radius: .42rem;
  background: var(--yellow);
  color: var(--deep);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cart-form { margin-top: .85rem; }

.cart-form h3 {
  margin: 0 0 .5rem;
  color: var(--deep);
  font-size: 1.1rem;
}

.cart-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem .7rem;
}

.cart-fields label {
  display: grid;
  gap: .25rem;
  color: var(--deep);
  font-size: .86rem;
  font-weight: 750;
}

.cart-wide { grid-column: 1 / -1; }
.cart-form textarea { min-height: 4rem; resize: vertical; }
.cart-submit { width: 100%; }

.cart-order-number {
  display: inline-block;
  padding: .46rem .65rem;
  border-radius: .4rem;
  background: var(--yellow);
  color: var(--deep);
  font-size: clamp(1rem, 5vw, 1.35rem);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.cart-menu-links {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .75rem;
  margin-top: .65rem;
}

.cart-menu-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--teal);
  font-size: .84rem;
  font-weight: 750;
  text-underline-offset: .2em;
}

.cart-feedback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 650px) {
  .drinks-page .header-inner { gap: .45rem; }
  .drinks-page .site-header .brand { align-self: center; }
  .drinks-page .site-header .brand img { width: clamp(4.8rem, 23vw, 6.5rem); }
  .drinks-page .header-actions:has(.cart-trigger:not([hidden])) {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: .28rem;
    padding-block: .3rem;
  }
  .drinks-page .header-actions .btn { min-height: 2.75rem; padding: .35rem .6rem; }
  .drinks-page .drinks-home-link { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .food-item-with-photo > .menu-order:has(.menu-order-choice) { grid-column: 1 / -1; }
  .cart-fields { grid-template-columns: minmax(0, 1fr); }
  .cart-item { padding-inline: .6rem; }
}

@media (max-width: 410px) {
  .drinks-page .header-actions .btn { padding-inline: .36rem; font-size: .8rem; }
  .drinks-page .cart-trigger { gap: .27rem; }
  .drinks-page .cart-trigger-icon { width: 1rem; height: 1rem; }
  .drinks-page .site-header .brand img { width: clamp(4.2rem, 22vw, 5rem); }
}

@media (max-width: 345px) {
  .drinks-page .header-delivery > span { display: grid; line-height: 1.1; }
}