/* Lord order-card source header: huge source letter, tiny delivery type, then countdown. */
.order-row{
  grid-template-columns:180px 76px minmax(160px,1fr) 76px 92px!important;
  align-items:start!important;
  min-height:108px!important;
}
.order-row .source-stack{
  grid-column:1!important;
  grid-row:1!important;
  position:relative!important;
  padding:0!important;
  min-height:84px!important;
  align-self:start!important;
  justify-self:start!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:flex-start!important;
  gap:6px!important;
}
.order-row>div:nth-child(1){grid-column:2!important;grid-row:1!important;padding-top:3px}
.order-row .order-main{grid-column:3!important;grid-row:1!important;padding-top:3px}
.order-row .amount{grid-column:4!important;grid-row:1!important;padding-top:3px}
.order-row .status{grid-column:5!important;grid-row:1!important;padding-top:3px}

/* Source: exactly the strongest visual marker in the upper-left corner. */
.order-row .source-stack .source-badge{
  order:1!important;
  width:84px!important;
  height:84px!important;
  min-width:84px!important;
  border-radius:18px!important;
  font-size:40px!important;
  line-height:84px!important;
  display:inline-grid!important;
  place-items:center!important;
  font-weight:950!important;
  margin:0!important;
}

/* Delivery type is intentionally about four times smaller than the source badge. */
.order-row .source-stack .fulfill-badge{
  order:2!important;
  width:21px!important;
  height:21px!important;
  min-width:21px!important;
  padding:0!important;
  border-radius:6px!important;
  display:inline-grid!important;
  place-items:center!important;
  font-size:9px!important;
  line-height:21px!important;
  font-weight:950!important;
  margin:2px 0 0 0!important;
}

/* Countdown follows immediately to the right of source + delivery type. */
.order-row .source-stack .ref-order-timer{
  order:3!important;
  position:static!important;
  transform:none!important;
  min-width:62px!important;
  height:34px!important;
  padding:0 8px!important;
  margin:0!important;
  border-radius:9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  font-weight:950!important;
  font-variant-numeric:tabular-nums!important;
  white-space:nowrap!important;
  z-index:1!important;
}
.order-row .source-stack .ref-order-timer strong{font-size:18px!important;line-height:1!important}
.order-row .source-stack .ref-order-timer small{font-size:7px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.03em!important}
.order-row .status .ref-order-timer{display:none!important}

/* One danger rule for every channel: green until the final 15 minutes. */
.ref-timer-green{background:#e5f7eb!important;color:#18713a!important}
.ref-timer-red{background:#ffe7e7!important;color:#c53030!important;box-shadow:inset 0 0 0 1px rgba(197,48,48,.14)!important}

@media(max-width:1280px){
  .order-row{grid-template-columns:164px 68px minmax(150px,1fr) 70px 86px!important}
  .order-row .source-stack .source-badge{width:72px!important;height:72px!important;min-width:72px!important;font-size:34px!important;line-height:72px!important}
}

@media(max-width:900px){
  .order-row{grid-template-columns:148px minmax(0,1fr) auto!important;grid-template-areas:none!important;min-height:102px!important}
  .order-row .source-stack{grid-column:1!important;grid-row:1!important;min-height:68px!important}
  .order-row .source-stack .source-badge{width:64px!important;height:64px!important;min-width:64px!important;font-size:30px!important;line-height:64px!important;border-radius:14px!important}
  .order-row .source-stack .fulfill-badge{width:18px!important;height:18px!important;min-width:18px!important;font-size:8px!important;line-height:18px!important}
  .order-row .source-stack .ref-order-timer{min-width:54px!important;height:30px!important;padding:0 6px!important}
  .order-row .source-stack .ref-order-timer strong{font-size:16px!important}
  .order-row>div:nth-child(1){display:none!important}
  .order-row .order-main{grid-column:2!important;grid-row:1!important}
  .order-row .amount{grid-column:3!important;grid-row:1!important}
  .order-row .status{grid-column:3!important;grid-row:2!important}
}