/* Shared customer surface polish: existing states and layouts stay authoritative. */
body {
  background: var(--cream);
}

.topbar {
  background: var(--paper);
}

.account-center-button,
.reservation-nav-link,
.language-current {
  font-weight: 700;
}

.search-box:focus-within {
  outline: 2px solid var(--basil);
  outline-offset: 3px;
}

.category-strip button,
.category-strip button[aria-pressed="true"] {
  box-shadow: none;
  font-weight: 700;
}

.product-card {
  box-shadow: 0 7px 22px rgb(31 31 31 / 6%);
}

.product-card .product-copy {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.product-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-block-start: auto;
  padding-block-start: 8px;
}

.product-meta .product-price {
  max-width: 100%;
}

/* Let each whole tag wrap beside the price, keeping the runtime container. */
.product-meta .product-card-badges {
  display: contents;
  margin: 0;
}

.product-meta .product-badge {
  border-radius: 6px;
  font-weight: 600;
  min-height: 1.35rem;
  padding: 0.2rem 0.42rem;
}

.product-copy,
.customize-head > div,
.checkout-form-head > div {
  min-width: 0;
}

.product-copy h3,
.customize-head h2,
.account-center-head h2 {
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.product-copy h3 {
  font-weight: 750;
}

.product-copy p,
.customize-head p,
.checkout-form-head p {
  font-weight: 500;
  line-height: 1.45;
}

.cart-panel {
  box-shadow: 0 9px 28px rgb(31 31 31 / 7%);
}

.cart-total {
  border-top: 1px solid var(--line);
  padding-block-start: 14px;
}

.checkout-form {
  gap: 16px;
  margin-block-start: 18px;
  padding-block-start: 18px;
}

.checkout-grid {
  min-width: 0;
  gap: 14px;
}

.checkout-form label,
.account-center-form label {
  min-width: 0;
  font-weight: 650;
  line-height: 1.4;
}

.checkout-form input,
.checkout-form select,
.checkout-form textarea {
  min-width: 0;
}

.payment-options,
.customize-options {
  gap: 12px;
}

.customize-head {
  border-bottom: 1px solid var(--line);
  padding-block-end: 14px;
}

.customize-options {
  padding-block: 2px;
}

.option-group legend {
  flex-wrap: wrap;
  line-height: 1.4;
}

.option-group legend span,
.option-choice span,
.option-choice bdi {
  overflow-wrap: anywhere;
}

.customize-actions {
  border-top: 1px solid var(--line);
  gap: 12px;
}

.account-center-sheet:has(#accountCenterLoggedOut:not([hidden])) {
  height: auto;
  min-height: 0;
  max-width: 560px;
  width: min(100%, 560px);
}

.account-center-login {
  align-self: start;
  gap: 18px;
  padding: 24px 22px;
  min-height: 0;
  overflow-y: auto;
}

.account-center-auth-copy p,
.account-center-auth-panel > p {
  font-weight: 500;
}

.account-center-panel-head h3 {
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .product-card {
    box-shadow: 0 5px 16px rgb(31 31 31 / 5%);
  }

  .category-strip {
    background: var(--cream);
  }

  /* Retain the existing compact cart and its full-screen open state. */
  .cart-panel {
    box-shadow: 0 -6px 20px rgb(31 31 31 / 9%);
  }

  .account-center-login {
    padding: 20px 16px;
  }
}

@media (max-width: 520px) {
  /* Three actions need the narrow bar. The labelled logo and restaurant hero
     retain the full brand identity without overlap. */
  .topbar:has(#storefrontReservationLink:not([hidden])) .brand > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .topbar:has(#storefrontReservationLink:not([hidden])) .brand,
  .topbar-actions {
    flex: 0 0 auto;
  }

  .checkout-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-form-head {
    flex-wrap: wrap;
  }
}
.order-status-connection {
  background: #edf7f0;
  border-inline-start: 3px solid #146b3a;
  border-radius: 8px;
  color: #245036;
  display: grid;
  gap: 4px;
  line-height: 1.45;
  margin-block: 12px;
  overflow-wrap: anywhere;
  padding: 10px 12px;
}

.order-status-connection:is(.is-waiting, .is-offline, .is-unavailable) {
  background: #fff4d9;
  border-inline-start-color: #ab6800;
  color: #654300;
}

.order-status-connection small {
  color: inherit;
}