/* Jae's Cakes — customer ordering page.
   The page is organised around one idea: the tray. What's on it, how much of
   it is left, and how much of it you're taking home. */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--berry-deep);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------------ header */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 237, 229, 0.9);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.masthead__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0.65rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}

.brand__mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: #fff;
  object-fit: cover;
  flex: none;
}

.brand__name {
  display: block;
  font-family: var(--display);
  font-size: 1.06rem;
  line-height: 1.1;
}

.brand__sub {
  display: block;
  font-size: 0.688rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}

.masthead__right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* A dot and a word rather than another boxed pill — the header already
   carries the cart, and competing call-outs cancel each other out. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}

.status.is-open {
  color: var(--pistachio-deep);
}

.status.is-open .status__dot {
  background: var(--pistachio);
  box-shadow: 0 0 0 3px var(--pistachio-wash);
}

.masthead__link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--berry-deep);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
}

.masthead__link:hover {
  border-bottom-color: var(--berry);
}

/* Cart. Appears only once there is something in the box, so an empty header
   stays quiet and a filled one is impossible to miss. */
.cart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.44rem 0.75rem 0.44rem 0.68rem;
  border-radius: 999px;
  background: var(--berry);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: 0 1px 2px rgba(58, 33, 40, 0.16);
  transition: background 0.18s var(--ease), transform 0.18s var(--ease);
}

.cart:hover {
  background: var(--berry-deep);
}

.cart:active {
  transform: translateY(1px);
}

.cart__icon {
  flex: none;
}

.cart__count {
  min-width: 1.3rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.75rem;
  line-height: 1.3rem;
  text-align: center;
}

/* A change in the count is worth one small nudge. */
.cart.is-bumped {
  animation: cart-bump 0.32s var(--ease);
}

@keyframes cart-bump {
  40% { transform: scale(1.09); }
}

/* ---------------------------------------------------------- announcement */

.announce {
  background: var(--caramel);
  color: #fff;
}

.announce__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
}

/* -------------------------------------------------------------------- hero */

/* Sticky footer: on short views (closed shop, confirmation) the footer should
   sit at the bottom of the window rather than halfway up it. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 1.25rem 7rem;
}

.hero {
  padding: 3.6rem 0 2.6rem;
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.hero__title {
  font-size: clamp(2.9rem, 9vw, 5rem);
  letter-spacing: -0.028em;
}

.hero__lede {
  margin: 0.9rem auto 0;
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 30rem;
}

/* The single fact worth carrying above the menu. */
.hero__pickup {
  display: inline-block;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--caramel-deep);
}

/* ------------------------------------------------------------- menu cards */

/* Roomier than before: whitespace is what lets each bake stand on its own. */
.menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 2rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.card:hover:not(.is-sold-out) {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.card.is-sold-out {
  opacity: 0.72;
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--caramel-wash);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No photo yet: an initial set in the display face beats a broken image. */
.card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 3.5rem;
  color: var(--caramel);
  opacity: 0.55;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.95), transparent 58%),
    var(--caramel-wash);
}

.card__stamp {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.688rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.35rem 1.35rem;
}

/* Name and price on one line, the way a printed menu sets them. */
.card__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.card__name {
  font-size: 1.31rem;
}

.card__price {
  font-size: 1.06rem;
  color: var(--caramel-deep);
  white-space: nowrap;
}

.card__desc {
  margin-top: 0.5rem;
  font-size: 0.938rem;
  line-height: 1.5;
  color: var(--ink-soft);
  white-space: pre-line;
}

/* ------------------------------------------------------- the tray counter */
/* A proportional gauge of what is left of the batch. It reads identically at
   any batch size, and the same device appears in the admin so stock looks the
   same on both sides of the shop. */

.stock {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
  max-width: 11rem;
}

.tray {
  display: block;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: var(--caramel-wash);
  border: 1px solid var(--caramel-soft);
  overflow: hidden;
}

.tray__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--caramel);
  transition: width 0.35s var(--ease), background 0.25s var(--ease);
}

.tray-label {
  font-family: var(--mono);
  font-size: 0.813rem;
  color: var(--muted);
}

/* Emphasis is earned: the gauge and its label only speak up once a batch is
   genuinely running down. */
.stock.is-low .tray__fill {
  background: var(--berry);
}

.stock.is-low .tray-label {
  color: var(--berry);
  font-weight: 500;
}

.tray-limit {
  font-size: 0.75rem;
  color: var(--muted);
}

.card.is-sold-out .tray__fill {
  background: var(--muted);
}

/* No rule here: spacing separates the information from the action. */
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: auto;
  padding-top: 1.25rem;
}

/* ------------------------------------------------------------ qty stepper */

.stepper {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px;
}

.stepper__btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--berry-deep);
  transition: background 0.15s var(--ease);
}

.stepper__btn:hover:not(:disabled) {
  background: var(--berry-wash);
}

.stepper__btn:disabled {
  color: var(--line-strong);
  cursor: not-allowed;
}

.stepper__value {
  min-width: 1.6rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.938rem;
}

.card__add {
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: var(--berry);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  transition: background 0.18s var(--ease);
}

.card__add:hover:not(:disabled) {
  background: var(--berry-deep);
}

.card__add:disabled {
  background: var(--line-strong);
  cursor: not-allowed;
}

/* -------------------------------------------------------------- order bar */

/* Light rather than dark: it sits over a warm page all the time, so it earns
   attention with a lifted edge and the one filled button, not with mass. */
.orderbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  background: var(--card);
  color: var(--ink);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -2px 4px rgba(58, 33, 40, 0.04), 0 -14px 34px -18px rgba(58, 33, 40, 0.3);
  animation: slide-up 0.32s var(--ease);
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.orderbar__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  /* Clear the iPhone home indicator without adding a gap on other devices. */
  padding: 0.8rem 1.25rem calc(0.8rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 1rem;
}

.orderbar__count {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.orderbar__label {
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--muted);
}

.orderbar__items {
  color: var(--ink);
  font-size: 0.938rem;
}

.orderbar__total {
  margin-left: auto;
  font-size: 1.31rem;
  color: var(--caramel-deep);
}

.orderbar__go {
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

/* --------------------------------------------------------------- checkout */

.checkout {
  padding-top: 2rem;
}

.checkout__back {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--berry-deep);
  padding: 0.4rem 0;
  margin-bottom: 1.4rem;
}

.checkout__back:hover {
  color: var(--ink);
}

.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

.checkout__title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  margin: 0.6rem 0 1.6rem;
}

.checkout__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field__label-soft {
  font-weight: 400;
  color: var(--muted);
}

.checkout__submit {
  width: 100%;
  margin-top: 0.6rem;
  padding: 0.9rem 1.25rem;
  font-size: 1rem;
}

.checkout__fineprint {
  margin-top: 0.75rem;
  font-size: 0.813rem;
  color: var(--muted);
  text-align: center;
}

[data-checkout-error] {
  margin-bottom: 1.2rem;
}

/* The order summary is the thing being confirmed, so it is given a headed panel
   rather than a plain sidebar card. */
.summary {
  position: sticky;
  top: 5.5rem;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.summary__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.5rem;
  background: var(--berry-wash);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  list-style: none;
}

.summary__head::-webkit-details-marker {
  display: none;
}

.summary__count {
  margin-left: auto;
}

/* The total shows in the header only while the panel is folded, so it is never
   on screen twice. */
.summary__money {
  display: none;
  font-weight: 700;
  color: var(--berry-deep);
}

[data-summary-disclosure]:not([open]) .summary__money {
  display: inline;
}

[data-summary-disclosure]:not([open]) .summary__count::after {
  content: " ·";
}

.summary__chev {
  color: var(--berry-deep);
  transition: transform 0.2s var(--ease);
}

[data-summary-disclosure][open] .summary__chev {
  transform: rotate(180deg);
}

.summary__count {
  font-size: 0.813rem;
  color: var(--berry-deep);
}

.summary__body {
  padding: 0.25rem 1.5rem 1.5rem;
}

.summary__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.summary__line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.938rem;
}

.summary__line-qty {
  display: block;
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.813rem;
}

.summary__line-price {
  font-family: var(--mono);
  white-space: nowrap;
}

.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 1rem;
  font-weight: 700;
  font-size: 1.125rem;
}

.summary__total .mono {
  color: var(--caramel-deep);
}

.summary__pickup {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.summary__pickup dt {
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.summary__pickup dd {
  margin: 0 0 0.75rem;
  white-space: pre-line;
}

.summary__pickup dd:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------- confirmation */

.done {
  max-width: 34rem;
  margin: 0 auto;
  padding-top: 3.5rem;
  text-align: center;
}

.done__title {
  font-size: clamp(2.2rem, 6vw, 3.25rem);
  margin: 0.6rem 0 1.75rem;
}

.done__number {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.done__number-label {
  display: block;
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--muted);
}

.done__number strong {
  display: block;
  margin-top: 0.35rem;
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--caramel-deep);
  letter-spacing: 0.02em;
}

.done__lede {
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
}

.done__lines {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  text-align: left;
}

.done__lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.938rem;
}

.done__total {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  font-weight: 700;
}

.done__pickup {
  margin-top: 1.75rem;
  padding: 1.25rem;
  background: var(--berry-wash);
  border-radius: var(--radius);
  text-align: left;
  font-size: 0.875rem;
}

.done__pickup dt {
  font-size: var(--label-size);
  font-weight: 700;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--berry-deep);
  margin-bottom: 0.15rem;
}

.done__pickup dd {
  margin: 0 0 0.75rem;
  white-space: pre-line;
}

.done__pickup dd:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------- generic states */

.state {
  max-width: 34rem;
  margin: 0 auto;
  padding: 5rem 0;
  text-align: center;
}

.state--closed {
  padding-top: 6rem;
}

.state__title {
  font-size: clamp(2.2rem, 6vw, 3.25rem);
  margin: 0.6rem 0 1rem;
}

.state__text {
  color: var(--ink-soft);
  white-space: pre-line;
}

.state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Three pips settling onto a tray, one after another. */
.tray-loader {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.tray-loader i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--berry-soft);
  animation: pip 1.1s var(--ease) infinite;
}

.tray-loader i:nth-child(2) { animation-delay: 0.14s; }
.tray-loader i:nth-child(3) { animation-delay: 0.28s; }

@keyframes pip {
  0%, 100% { background: var(--berry-soft); transform: translateY(0); }
  40% { background: var(--berry); transform: translateY(-5px); }
}

/* ----------------------------------------------------------------- lookup */

.lookup {
  width: min(26rem, calc(100vw - 2rem));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: 0;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
}

.lookup::backdrop {
  background: rgba(35, 43, 36, 0.44);
  backdrop-filter: blur(2px);
}

.lookup__form {
  padding: 1.5rem;
}

.lookup__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.lookup__title {
  font-size: 1.5rem;
}

.lookup__close {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  padding: 0 0.25rem;
}

.lookup__close:hover {
  color: var(--ink);
}

.lookup__submit {
  width: 100%;
}

[data-lookup-error] {
  margin-bottom: 1rem;
}

.lookup__result {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

.lookup__status {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--berry-wash);
  color: var(--berry-deep);
  margin-bottom: 0.75rem;
}

.lookup__result ul {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
}

.lookup__result li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
}

/* ----------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line);
  background: var(--paper-deep);
}

.foot__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 2rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.foot__name {
  font-family: var(--display);
  font-size: 1.06rem;
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.875rem;
}

.foot__links [data-foot-links] {
  display: contents;
}

.foot__lookup {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--berry-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------- entrance motion */

.card {
  animation: rise 0.5s var(--ease) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .checkout__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .summary {
    position: static;
    order: -1;
  }
}

/* ---------------------------------------------------------------- phones */
/* Purpose-built rather than squeezed: one column, thumb-sized controls, and a
   single cart affordance — the bottom bar — instead of two. */

@media (max-width: 700px) {
  main {
    padding: 0 1rem 8rem;
  }

  .masthead__inner {
    padding: 0.55rem 1rem;
    gap: 0.6rem;
  }

  .masthead__right {
    gap: 0.75rem;
  }

  /* The bottom bar already is the cart; a second one in the header is noise. */
  .cart {
    display: none !important;
  }

  .masthead__link {
    font-size: 0.813rem;
  }

  .brand__sub {
    display: none;
  }

  .brand__name {
    white-space: nowrap;
    font-size: 1rem;
  }

  .brand__mark {
    width: 36px;
    height: 36px;
  }

  .status {
    font-size: 0.625rem;
    letter-spacing: 0.04em;
  }

  .hero {
    padding: 2.4rem 0 2rem;
  }

  .hero__lede {
    font-size: 1.03rem;
  }

  .menu {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* A shallower crop puts more of the menu on screen at once. */
  .card__media {
    aspect-ratio: 16 / 10;
  }

  .card__body {
    padding: 1.1rem 1.15rem 1.15rem;
  }

  .card__name {
    font-size: 1.19rem;
  }

  .card__foot {
    padding-top: 1.1rem;
  }

  /* Thumb-sized: 44px is the smallest comfortable tap target. */
  .card__add {
    min-height: 44px;
    padding: 0.6rem 1.3rem;
  }

  .stepper {
    padding: 4px;
  }

  .stepper__btn {
    width: 38px;
    height: 38px;
    font-size: 1.19rem;
  }

  .stepper__value {
    min-width: 2rem;
    font-size: 1rem;
  }

  .checkout__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .checkout__title {
    font-size: 1.75rem;
  }

  .summary__head,
  .summary__body {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }

  /* Comfortable typing targets, and 16px stops iOS zooming the page on focus. */
  .input,
  .textarea,
  .select {
    font-size: 16px;
    padding: 0.72rem 0.8rem;
  }

  .checkout__submit {
    min-height: 50px;
  }

  .done {
    padding-top: 2.5rem;
  }

  .foot__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .orderbar__inner {
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    gap: 0.75rem;
  }

  .orderbar__total {
    font-size: 1.19rem;
  }

  .orderbar__go {
    min-height: 46px;
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
}

@media (max-width: 380px) {
  .status {
    display: none;
  }
}