/* Pages that fill the screen: heights divide by the layout's html zoom so they match the real window */
.page.yalko-user.setup, .page.yalko-user.sign-in {
  --page-zoom: 1;
  box-sizing: border-box;
  height: calc(100vh / var(--page-zoom));
  height: calc(100dvh / var(--page-zoom));
  min-height: 0;
  margin-bottom: 0;
}

@media screen and (min-width: 1400px) {
  .page.yalko-user.setup, .page.yalko-user.sign-in {
    --page-zoom: 1.15;
  }
}

.page.yalko-user.sign-in {
  padding-top: 0;
  padding-bottom: 0;
}

.page.yalko-user.sign-in .yalko-user-card {
  margin-bottom: 0;
}

/* Setup pages: every inner radius = outer radius - the space between them, so nested corners stay concentric */
.page.yalko-user.setup {
  --setup-space: 15px;
  --setup-pill: 25px;
  --setup-fade: 24px;
  --setup-tile-pad: 6px;
  --setup-panel-radius: calc(var(--setup-pill) + var(--setup-space));
  --setup-card-radius: calc(var(--setup-panel-radius) + var(--setup-space));
  --setup-media-radius: calc(var(--setup-pill) - var(--setup-tile-pad));
  padding: calc(var(--setup-space) * 2);
}

.yalko-user-card.setup {
  grid-column-gap: var(--setup-space);
  grid-row-gap: var(--setup-space);
  border-radius: var(--setup-card-radius);
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: 250px minmax(0, 1fr);
  width: 100%;
  min-width: auto;
  max-width: 1100px;
  height: 100%;
  min-height: 0;
  max-height: 860px;
  margin-bottom: 0;
  padding: var(--setup-space);
  display: grid;
  overflow: hidden;
}

.setup-sidebar {
  grid-row-gap: 16px;
  background-color: var(--bg-glass-dark);
  outline-color: var(--border);
  outline-offset: 0px;
  border-radius: var(--setup-panel-radius);
  outline-width: .5px;
  outline-style: solid;
  flex-flow: column;
  min-height: 0;
  padding-top: 30px;
  display: flex;
  overflow: hidden;
}

.setup-sidebar .sign-in-provider {
  max-width: 90px;
}

.setup-sidebar-title {
  color: #fff;
  text-align: center;
  font-size: 18px;
}

.setup-step-list {
  grid-row-gap: 4px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  scrollbar-width: none;
  flex-flow: column;
  flex: 1;
  min-height: 0;
  padding: 20px;
  display: flex;
  overflow-y: auto;
}

.setup-step-list::-webkit-scrollbar {
  display: none;
}

.setup-step-item {
  grid-column-gap: 12px;
  color: #ffffff73;
  border-radius: 20px;
  flex: none;
  align-items: center;
  padding: 7px 14px 7px 7px;
  font-size: 14px;
  text-decoration: none;
  transition: all .2s;
  display: flex;
}

.setup-step-item.done {
  color: #fff;
}

.setup-step-item.done:hover {
  background-color: var(--inner-shadow);
}

.setup-step-item.current {
  background-color: var(--selected-glass);
  box-shadow: inset 0 0 25px 1px var(--selected-inner-shadow);
  color: #000;
}

.setup-step-number {
  outline-color: var(--border);
  outline-offset: 0px;
  border-radius: 100px;
  outline-width: .5px;
  outline-style: solid;
  justify-content: center;
  align-items: center;
  width: 26px;
  min-width: 26px;
  height: 26px;
  font-size: 12px;
  display: flex;
}

.setup-step-item.done .setup-step-number {
  background-color: var(--selected-glass);
  color: #000;
}

.setup-step-item.current .setup-step-number {
  background-color: #000;
  color: #fff;
  outline-style: none;
}

.setup-content {
  flex-flow: column;
  min-width: 0;
  min-height: 0;
  display: flex;
}

.setup-scroll {
  grid-row-gap: var(--setup-space);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--setup-fade), #000 calc(100% - var(--setup-fade)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--setup-fade), #000 calc(100% - var(--setup-fade)), transparent);
  scrollbar-width: none;
  flex-flow: column;
  flex: 1;
  min-height: 0;
  padding-top: var(--setup-fade);
  padding-bottom: calc(var(--setup-fade) * 2);
  display: flex;
  overflow-y: auto;
}

.setup-scroll::-webkit-scrollbar {
  display: none;
}

.setup-header {
  grid-row-gap: 8px;
  flex-flow: column;
  padding: 0 var(--setup-space);
  display: flex;
}

.setup-header-logo {
  display: none;
}

.setup-step {
  color: #ffffffa6;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
}

.setup-title {
  color: #fff;
  font-size: 32px;
  line-height: 38px;
}

.setup-text {
  color: #ffffffbf;
  max-width: 650px;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
}

.setup-progress {
  grid-column-gap: 5px;
  margin-top: 6px;
  display: none;
}

.setup-progress-step {
  background-color: var(--inner-shadow);
  outline-color: var(--border);
  border-radius: 10px;
  outline-width: .5px;
  outline-style: solid;
  flex: 1;
  height: 6px;
}

.setup-progress-step.filled {
  background-color: #fff;
  outline-style: none;
}

.setup-columns {
  grid-column-gap: var(--setup-space);
  grid-row-gap: var(--setup-space);
  grid-template-columns: 3fr 2fr;
  align-items: start;
  display: grid;
}

.setup-group {
  grid-row-gap: var(--setup-space);
  background-color: var(--bg-glass-dark);
  outline-color: var(--border);
  outline-offset: 0px;
  border-radius: var(--setup-panel-radius);
  outline-width: .5px;  
  flex-flow: column;
  flex: none;
  padding: var(--setup-space);
  display: flex;
}

.setup-group-title {
  color: #fff;
  padding: 5px 10px 0;
  font-size: 18px;
}

.setup-group-text {
  color: #ffffffa6;
  margin-top: -8px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
}

.setup-grid {
  grid-column-gap: var(--setup-space);
  grid-row-gap: 18px;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.setup-grid.tiles {
  grid-row-gap: var(--setup-space);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.setup-field {
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: flex-end;
  min-width: 0;
  display: flex;
}

.setup-field.full {
  grid-column: 1 / -1;
}

.setup-field .sign-infield-label {
  margin-bottom: 0;
}

.yalko-user-card.setup .sign-in-input {
  border-radius: var(--setup-pill);
  height: calc(var(--setup-pill) * 2);
  min-height: calc(var(--setup-pill) * 2);
}

.yalko-user-card.setup .product-input.description {
  border-radius: var(--setup-pill);
  overflow: hidden;
}

.product-input.description.setup-tall {
  height: 50vh;
}

.setup-textarea {
  box-sizing: border-box;
  resize: none;
  field-sizing: content;
  scrollbar-width: none;
  max-height: 100%;
  overflow-y: auto;
}

.setup-hint {
  color: #ffffff8c;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

.setup-field.setup-tile {
  background-color: var(--inner-shadow);
  border-radius: var(--setup-pill);
  justify-content: flex-start;
  margin-bottom: 0;
  padding: var(--setup-tile-pad);
}

.setup-tile .sign-infield-label {
  padding: 12px 10px 0;
}

.setup-tile .setup-hint {
  padding: 0 10px 4px;
}

.setup-tile .product-images-field {
  width: 100%;
  margin-top: auto;
  padding: 0;
}

.setup-tile .product-images-field > .product-images {
  aspect-ratio: 16 / 10;
  background-color: var(--inner-shadow);
  outline-color: var(--border);
  border-radius: var(--setup-media-radius);
  outline-width: .5px;
  outline-style: solid;
  width: 100%;
}

.setup-tile .product-image {
  aspect-ratio: auto;
  object-fit: contain;
  box-shadow: none;
  border-radius: var(--setup-media-radius);
  outline-style: none;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
}

.setup-tile .remove-variant.product-images {
  inset: 4px 4px auto auto;
}

.setup-tile .cancel-btn {
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  padding: 8px;
}

.setup-tile .add-image {
  cursor: pointer;
  width: 60px;
  min-width: 60px;
  height: 60px;
}

.setup-check {
  --setup-switch-inset: 9px;
  --setup-track-radius: calc(var(--setup-pill) - var(--setup-switch-inset));
  --setup-track-width: calc(var(--setup-track-radius) * 3.5);
  --setup-knob-radius: calc(var(--setup-track-radius) - 4px);
  color: #fff;
  cursor: pointer;
  justify-content: space-between;
  padding: 0 var(--setup-switch-inset);
}

.setup-check span {
  text-align: center;
  order: 1;
  flex: 1;
  padding-left: var(--setup-track-width);
}

.setup-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--inside-glass);
  box-shadow: inset 0 0 25px 5px var(--inner-shadow);
  outline-color: var(--border);
  outline-offset: 0px;
  border-radius: var(--setup-track-radius);
  outline-width: .5px;
  outline-style: solid;
  cursor: pointer;
  order: 2;
  flex: none;
  width: var(--setup-track-width);
  height: calc(var(--setup-track-radius) * 2);
  margin: 0;
  transition: background-color .25s, box-shadow .25s;
  position: relative;
}

.setup-check input[type="checkbox"]::before {
  content: "";
  background-color: var(--selected-glass);
  box-shadow: 0 0 25px -1px var(--selected-outer-shadow), inset 0 0 25px 1px var(--selected-inner-shadow);
  border-radius: var(--setup-knob-radius);
  width: calc(var(--setup-knob-radius) * 2);
  height: calc(var(--setup-knob-radius) * 2);
  transition: transform .25s, background-color .25s;
  position: absolute;
  top: 4px;
  left: 4px;
}

.setup-check input[type="checkbox"]:checked {
  background-color: var(--selected-glass);
  box-shadow: inset 0 0 25px 1px var(--selected-inner-shadow);
  outline-color: transparent;
}

.setup-check input[type="checkbox"]:checked::before {
  background-color: #000;
  box-shadow: none;
  transform: translateX(calc(var(--setup-track-width) - var(--setup-knob-radius) * 2 - 8px));
}

.setup-check input[type="checkbox"]:focus-visible {
  outline-color: #fff;
  outline-offset: 2px;
  outline-width: 2px;
}

.setup-color-value {
  z-index: 0;
  color: #fff;
  text-shadow: 0 0 6px #000;
  text-transform: uppercase;
  pointer-events: none;
  width: 100%;
  font-size: 13px;
  text-align: center;
}

.setup-day {
  grid-column-gap: var(--setup-space);
  grid-template-columns: 100px 1fr;
  align-items: center;
  display: grid;
}

.setup-day .sign-infield-label {
  text-align: left;
  padding-left: 10px;
}

.setup-user-list {
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}

.setup-user {
  grid-row-gap: 2px;
  background-color: var(--inner-shadow);
  border-radius: var(--setup-pill);
  flex-flow: column;
  padding: 12px 15px;
  display: flex;
}

.setup-user-name {
  color: #fff;
  text-align: center;
}

.setup-actions {
  z-index: 5;
  grid-column-gap: 10px;
  flex: none;
  margin-top: calc(var(--setup-fade) * -1);
  padding: 0 var(--setup-space) var(--setup-space);
  display: flex;
  position: relative;
}

.setup-actions .button.create-product {
  border-radius: var(--setup-pill);
  flex: 1;
  min-width: 0;
  height: calc(var(--setup-pill) * 2);
  min-height: calc(var(--setup-pill) * 2);
  margin-left: 0;
  margin-right: 0;
  white-space: nowrap;
}

.button.create-product.setup-back {
  background-color: var(--inside-glass);
  box-shadow: inset 0 0 25px 5px var(--inner-shadow);
  outline-color: var(--border);
  outline-width: .5px;
  outline-style: solid;
  color: #fff;
  flex: 0 0 130px;
}

@media screen and (max-width: 991px) {
  .page.yalko-user.setup {
    padding: var(--setup-space);
  }

  .yalko-user-card.setup {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
  }

  .setup-sidebar {
    display: none;
  }

  .setup-header-logo {
    max-width: 44px;
    margin-bottom: 8px;
    display: block;
  }

  .setup-progress {
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .setup-columns, .setup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .setup-grid.tiles {
    grid-template-columns: 1fr 1fr;
  }

  .setup-title {
    font-size: 26px;
    line-height: 32px;
  }

  .setup-text {
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (max-width: 479px) {
  .page.yalko-user.setup {
    --setup-space: 12px;
    --setup-pill: 23px;
  }

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

  .setup-tile .product-images-field > .product-images {
    aspect-ratio: 2 / 1;
  }

  .product-input.description.setup-tall {
    height: 45vh;
  }

  .setup-actions {
    grid-column-gap: 8px;
  }

  .setup-actions .button.create-product {
    font-size: 14px;
  }

  .button.create-product.setup-back {
    flex-basis: 76px;
  }
}


/* Category picker */
.category-hierarchy-field .category-hierarchy-column {
  max-height: 249px;
  overflow-y: auto;
}

.category-hierarchy-current,
.category-hierarchy-field .category-option {
  color: #fff;
}

.category-hierarchy-field .category-hierarchy-back-button {
  display: block;
  width: auto;
  padding: 0 0 10px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.category-hierarchy-back-button[hidden] {
  display: none;
}

.category-hierarchy-field .category-hierarchy-columns.is-sliding {
  overflow: visible;
  pointer-events: none;
}

.category-hierarchy-field .category-hierarchy-columns.is-sliding > .category-hierarchy-column {
  flex: 0 0 50%;
  width: 50%;
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .category-hierarchy-field .category-hierarchy-column {
    transition: none;
  }
}
/* Order options */
.order-option-group {
  margin-top: 16px;
  overflow-wrap: anywhere;
}

.order-option-group + .order-option-group {
  padding-top: 16px;
  border-top: 1px solid #80808040;
}

.order-option-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.order-option-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.order-option-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 20px;
  max-width: 100%;
  padding: 12px 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.order-option-list li + li {
  border-top: 1px solid #80808040;
}

.order-option-description {
  flex: 1 1 140px;
  min-width: 0;
}

.order-option-price {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 12px;
  opacity: .75;
}

.order-option-details {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 16px;
  max-width: 100%;
  margin-left: auto;
}

.order-option-form {
  display: inline;
  margin: 0;
}

.order-option-action {
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.order-option-action:hover {
  opacity: .65;
}

.order-option-action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.order-option-status {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: .65;
}

.order-option-list .is-returned .order-option-name,
.order-option-list .is-returned .order-option-price {
  text-decoration: line-through;
  opacity: .65;
}

.order-options-card {
  position: relative;
  padding-bottom: 60px;
}

.order-options-card .order-tags {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: auto;
  height: auto;
  margin: 0;
}

.order-options-card .product-img-container-card.products-page {
  flex: 1;
  width: auto;
  min-width: 0;
}

.order-options-card .product-desc-card {
  min-width: 0;
}

.order-options-card .product-price-container-card.products-page {
  position: static;
  align-self: stretch;
  flex-shrink: 0;
  min-width: 0;
  margin-left: 16px;
}

@media (max-width: 767px) {
  .order-options-card {
    flex-direction: column;
    gap: 8px 20px;
  }

  .order-options-card .product-img-container-card.products-page {
    width: 100%;
  }

  .order-options-card .product-img {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
  }

  .order-options-card .product-price-container-card.products-page {
    flex-direction: row;
    align-items: center;
    margin-left: 87px;
  }
}

/* Setup and discount loading: same look as the eCom checkout loading animation, faded in while a step or a discount saves */
.loading-animation.setup-loading,
.loading-animation.discount-loading,
.loading-animation.download-loading {
  z-index: 2147483647;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: #00000069;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
  transition: opacity .3s ease, visibility .3s ease;
}

.loading-animation.setup-loading.visible,
.loading-animation.discount-loading.visible,
.loading-animation.download-loading.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.loading-animation.setup-loading img,
.loading-animation.discount-loading img,
.loading-animation.download-loading img {
  max-width: 35%;
}

@media screen and (max-width: 479px) {
  .loading-animation.setup-loading img,
  .loading-animation.discount-loading img,
  .loading-animation.download-loading img {
    max-width: 70%;
  }
}

/* Discount entrees list: rows load in batches and are selected by tapping or sliding across them */
#entrees-list .entree-option {
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
  transition: background-color .15s ease;
}

#entrees-list .entree-option:focus {
  outline: none;
}

#entrees-list .entree-option:focus-visible {
  outline: 1px solid #fff;
  outline-offset: -1px;
}

#entrees-list.sliding,
#entrees-list.sliding .entree-option {
  cursor: ns-resize;
}

.entree-list-loading {
  color: #fff;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 50px;
  font-size: 15px;
  display: flex;
}

.entree-list-loading[hidden],
.entree-list-retry[hidden] {
  display: none;
}

.entree-list-retry {
  color: #fff;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  #entrees-list .entree-option {
    transition: none;
  }
}

/* Business settings pages: the setup switches, hints and media tiles reused inside the product fields, same sizes as the setup pages */
.product-fields.settings-fields {
  --setup-space: 15px;
  --setup-pill: 25px;
  --setup-tile-pad: 6px;
  --setup-media-radius: calc(var(--setup-pill) - var(--setup-tile-pad));
}

/* The switch track fits the 60px product input, so its pill is half that height */
.product-input.setup-check {
  --setup-pill: 30px;
}

.settings-fields .product-field > .setup-hint {
  text-align: left;
}

.settings-fields .setup-grid.tiles {
  margin-top: 10px;
}

.settings-fields .setup-tile .sign-infield-label {
  margin-bottom: 0;
}

.settings-fields .setup-tile .product-images-field {
  justify-content: center;
  display: flex;
}

/* Form PIN pop-up: hidden until a form that needs the manager PIN is sent, then it fades in over the page */
.pop-up.form-pin {
  opacity: 0;
  transition: opacity .2s;
  display: none;
}

/* Business style page: the home page section switches stack full width like the elegant one, the color bars sit two by two like the setup pages */
.settings-switches {
  grid-row-gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 10px;
}

.settings-colors {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 10px;
}

/* The glass and shadow pair steps aside so its two fields sit in the grid like the others */
.settings-alpha-color {
  display: contents;
}

/* The picker sits invisible over the whole bar, and the bar takes the picked color with its code on top */
.settings-color-bar {
  cursor: pointer;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.settings-color-input {
  opacity: 0;
  cursor: pointer;
  border: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

/* Opacity: the track fades from clear (over a faint checkerboard) to the picked color, so the slider shows what it sets */
.settings-opacity {
  --opacity-color: #fff;
  --opacity-knob: 22px;
  grid-column-gap: 14px;
  justify-content: flex-start;
  padding: 0 20px;
}

.settings-opacity-input {
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, transparent, var(--opacity-color)), repeating-conic-gradient(#ffffff2e 0 25%, transparent 0 50%) 0 0 / 12px 12px;
  outline-color: var(--border);
  border-radius: 6px;
  outline-width: .5px;
  outline-style: solid;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  height: 12px;
  margin: 0;
}

.settings-opacity-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  box-shadow: 0 0 12px -2px var(--selected-outer-shadow), inset 0 0 6px var(--inner-shadow);
  border-radius: 50%;
  width: var(--opacity-knob);
  height: var(--opacity-knob);
}

.settings-opacity-input::-moz-range-thumb {
  background-color: #fff;
  box-shadow: 0 0 12px -2px var(--selected-outer-shadow), inset 0 0 6px var(--inner-shadow);
  border: 0;
  border-radius: 50%;
  width: var(--opacity-knob);
  height: var(--opacity-knob);
}

.settings-opacity-input:focus-visible {
  outline-color: #fff;
  outline-offset: 4px;
  outline-width: 2px;
}

.settings-opacity-value {
  color: #fff;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex: none;
  min-width: 40px;
  font-size: 13px;
}

@media screen and (max-width: 767px) {
  .settings-colors {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Order page fee help: a "?" that says who each processing fee is charged to, its bubble shows on hover or tap */
.fee-help-button {
  vertical-align: middle;
  background-color: var(--selected-glass);
  box-shadow: inset 0 0 25px 1px var(--selected-inner-shadow);
  color: #000;
  cursor: pointer;
  border: 0;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
}

.fee-help-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.fee-help-tip {
  z-index: 30;
  background-color: #000000d9;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  outline-color: var(--border);
  border-radius: 15px;
  outline-width: .5px;
  outline-style: solid;
  color: #fff;
  pointer-events: none;
  width: 220px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  position: absolute;
}

/* Account set up page: on wider screens the card widens and the fields sit two by two, so it reads square instead of tall */
.account-setup-header,
.account-setup-field {
  grid-row-gap: 10px;
  flex-flow: column;
  display: flex;
}

.account-setup-title {
  color: #fff;
  text-align: center;
  font-size: 20px;
  line-height: 26px;
}

.account-setup-text {
  color: #ffffffa6;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
}

.yalko-user-card.account-setup .sign-infield-label {
  margin-bottom: 0;
}

.yalko-user-card.account-setup .sign-in-input {
  height: 45px;
}

.account-setup-fields {
  grid-column-gap: 20px;
  grid-row-gap: 16px;
  display: grid;
}

.account-setup-actions {
  grid-column-gap: 20px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

@media screen and (min-width: 768px) {
  .yalko-user-card.account-setup {
    grid-row-gap: 28px;
    width: 100%;
    max-width: 720px;
    padding: 36px;
  }

  .account-setup-text {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  .account-setup-fields {
    grid-template-columns: 1fr 1fr;
  }

  .account-setup-actions {
    flex-flow: row;
    align-items: center;
  }

  .account-setup-actions .sign-infield-label {
    flex: none;
    padding: 0 10px;
  }

  .account-setup-actions .button {
    flex: 1;
  }
}

/* Summary Sales / Traffic switch: same look as the order page's Pending / Complete switch, the lit side is the open page */
.summary-view-switch {
  -webkit-user-select: none;
  user-select: none;
  background: #0000004a;
  border: 1px solid #ffffff4d;
  border-radius: 9999px;
  width: 100%;
  text-decoration: none;
  display: flex;
  overflow: hidden;
}

.summary-view-switch .opt {
  color: #ffffffbf;
  text-align: center;
  border-radius: 9999px;
  flex: 1;
  padding: 14px 12px;
  font-size: 18px;
  font-weight: 600;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

.summary-view-switch .opt.active {
  color: #111;
  background-color: #ffffff70;
  box-shadow: inset 0 0 25px 1px #fff;
}

.summary-view-switch:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Summary and Traffic overview: headline for the range, range buttons, tiles, funnel and daily chart in the BOOTH glass style */
.summary-overview {
  grid-row-gap: 15px;
  scrollbar-width: none;
  overflow-y: auto;
}

.summary-overview::-webkit-scrollbar {
  display: none;
}

.summary-overview-header {
  grid-column-gap: 20px;
  grid-row-gap: 15px;
  border-bottom: 1px solid #ffffff4d;
  flex-flow: wrap;
  flex: none;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 15px;
  display: flex;
  position: relative;
}

.summary-headline {
  grid-row-gap: 4px;
  flex-flow: column;
  display: flex;
}

.summary-headline-label {
  grid-column-gap: 2px;
  color: #ffffffd9;
  align-items: center;
  font-size: 15px;
  display: flex;
}

.summary-headline-value {
  color: #fff;
  text-shadow: 0 0 20px #000000a6;
  font-size: 44px;
  line-height: 48px;
}

.summary-headline-range {
  color: #ffffffd9;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
}

/* Change badge: a light pill so green and red stay readable on any background */
.summary-change {
  color: #555;
  white-space: nowrap;
  background-color: #ffffffd9;
  border-radius: 100px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.summary-change.up,
.summary-tile.inverted .summary-change.down {
  color: #0a7d32;
}

.summary-change.down,
.summary-tile.inverted .summary-change.up {
  color: #c0262d;
}

.summary-range {
  grid-row-gap: 10px;
  flex-flow: column;
  align-items: flex-end;
  display: flex;
}

.summary-range-chips {
  grid-column-gap: 4px;
  background: #0000004a;
  border: 1px solid #ffffff4d;
  border-radius: 9999px;
  padding: 4px;
  display: flex;
}

.summary-range-chip {
  color: #ffffffbf;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 9999px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

.summary-range-chip:hover {
  color: #fff;
}

.summary-range-chip.active {
  color: #111;
  background-color: #ffffff70;
  box-shadow: inset 0 0 25px 1px #fff;
}

.summary-range-dates {
  grid-column-gap: 8px;
  align-items: center;
  display: none;
}

.summary-range-dates.open {
  display: flex;
}

.summary-range-to {
  color: #ffffffbf;
  font-size: 13px;
}

.summary-date-input {
  color: #fff;
  color-scheme: dark;
  background: #0000004a;
  border: 1px solid #ffffff4d;
  border-radius: 9999px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 14px;
}

.summary-tiles {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: none;
  display: grid;
}

.summary-tile {
  grid-row-gap: 6px;
  background-color: var(--selected-glass);
  box-shadow: inset 0 0 25px 5px var(--selected-inner-shadow);
  -webkit-backdrop-filter: blur(var(--frosting));
  backdrop-filter: blur(var(--frosting));
  border-radius: 30px;
  flex-flow: column;
  min-width: 0;
  padding: 16px 18px;
  display: flex;
}

.summary-tile-label {
  color: #000000b3;
  font-size: 14px;
}

.summary-tile-value {
  color: #000;
  overflow-wrap: anywhere;
  font-size: 26px;
  line-height: 30px;
}

.summary-tile-change {
  grid-column-gap: 6px;
  grid-row-gap: 4px;
  flex-flow: wrap;
  align-items: center;
  display: flex;
}

.summary-tile-hint {
  color: #00000099;
  font-size: 12px;
  font-weight: 400;
}

/* Funnel: each step's count, with the share that moved on from the step before under the arrow */
.summary-funnel {
  grid-column-gap: 10px;
  background-color: var(--bg-glass);
  -webkit-backdrop-filter: blur(var(--frosting));
  backdrop-filter: blur(var(--frosting));
  outline-color: var(--border);
  border-radius: 30px;
  outline-width: .5px;
  outline-style: solid;
  flex: none;
  align-items: center;
  padding: 12px 18px;
  display: flex;
}

.summary-funnel-step {
  text-align: center;
  flex: 1;
  min-width: 0;
}

.summary-funnel-value {
  color: #fff;
  font-size: 24px;
  line-height: 28px;
}

.summary-funnel-label {
  color: #ffffffbf;
  font-size: 13px;
  font-weight: 400;
}

.summary-funnel-arrow {
  color: #fff;
  flex-flow: column;
  flex: none;
  align-items: center;
  font-size: 13px;
  display: flex;
}

.summary-funnel-arrow::before {
  content: "→";
  font-size: 20px;
  line-height: 20px;
}

/* Daily chart: the bars grow to fill the space under the tiles, hovering one shows its value */
.summary-chart {
  grid-row-gap: 10px;
  background-color: var(--bg-glass);
  -webkit-backdrop-filter: blur(var(--frosting));
  backdrop-filter: blur(var(--frosting));
  outline-color: var(--border);
  border-radius: 30px;
  outline-width: .5px;
  outline-style: solid;
  flex-flow: column;
  flex: 1;
  min-height: 210px;
  padding: 16px 18px;
  display: flex;
}

.summary-chart-header {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.summary-chart-title {
  color: #fff;
  font-size: 16px;
}

.summary-chart-highest {
  color: #ffffffa6;
  font-size: 13px;
  font-weight: 400;
}

/* Few days would make very wide bars, so they stop at 56px and spread out from the first date to the last */
.summary-chart-bars {
  grid-column-gap: 4px;
  flex: 1;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 120px;
  display: flex;
}

.summary-chart-bar {
  flex: 1;
  align-items: flex-end;
  min-width: 2px;
  max-width: 56px;
  height: 100%;
  display: flex;
  position: relative;
}

/* Hovered bar's date: sits on the axis line under its bar, the first and last bars' dates hug the chart's edges */
.summary-chart-date {
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  font-size: 12px;
  line-height: 16px;
  transition: opacity .2s ease;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.summary-chart-bar:first-child .summary-chart-date {
  left: 0;
  transform: none;
}

.summary-chart-bar:last-child .summary-chart-date {
  left: auto;
  right: 0;
  transform: none;
}

.summary-chart-bar:hover .summary-chart-date {
  opacity: 1;
}

.summary-chart-fill {
  background-color: var(--selected-glass);
  box-shadow: inset 0 0 12px 1px var(--selected-inner-shadow);
  border-radius: 8px 8px 3px 3px;
  width: 100%;
  height: max(var(--bar), 3px);
  transition: background-color .14s ease;
}

.summary-chart-fill.empty {
  opacity: .35;
}

.summary-chart-bar:hover .summary-chart-fill {
  background-color: #fff;
}

.summary-chart-axis {
  color: #ffffffa6;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  display: flex;
}

.summary-chart-axis span {
  transition: opacity .2s ease;
}

.summary-chart:has(.summary-chart-bar:hover) .summary-chart-axis span {
  opacity: 0;
}

/* The right panel ends on the same line as the Sign Out button */
.summary-page.summary-overview {
  padding-bottom: 1px;
}

/* Phones: one scrolling column above the nav bar */
.summary-overview.mobile {
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: 24px 20px 140px;
  display: flex;
}

/* The column is taller than the screen and scrolls, so nothing in it shrinks to fit */
.summary-overview.mobile > * {
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .summary-overview-header {
    flex-flow: column;
    align-items: stretch;
  }

  .summary-headline-value {
    font-size: 36px;
    line-height: 40px;
  }

  .summary-range {
    align-items: stretch;
  }

  .summary-range-chip {
    text-align: center;
    flex: 1;
    padding: 9px 6px;
    font-size: 14px;
  }

  .summary-range-dates.open {
    justify-content: space-between;
  }

  .summary-date-input {
    flex: 1;
    min-width: 0;
  }

  .summary-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .summary-tile {
    border-radius: 24px;
    padding: 14px 15px;
  }

  .summary-tile-value {
    font-size: 22px;
    line-height: 26px;
  }

  .summary-chart {
    flex: none;
  }

  .summary-chart-bars {
    grid-column-gap: 2px;
  }
}

/* Phone order page: the status switch, Update Order and the payment actions, full width under the order details */
.order-mobile-status {
  grid-row-gap: 12px;
  flex-flow: column;
  width: 100%;
  margin-top: 10px;
  display: flex;
}

.order-mobile-status .order-done-switch {
  margin-top: 0;
}

.order-mobile-tracking {
  color: #fff;
  box-sizing: border-box;
  height: 44px;
  margin-bottom: 0;
  padding: 0 16px;
}

/* Desktop pins the order actions to the card's bottom, on phones they follow the totals */
.order-actions.order-mobile-actions {
  grid-row-gap: 10px;
  flex-flow: column;
  width: 100%;
  margin-top: 12px;
  display: flex;
  position: static;
  inset: auto;
}

.order-mobile-status .button,
.order-mobile-actions form,
.order-mobile-actions .button {
  width: 100%;
}

/* Touch screens: the small "?" help buttons get a bigger invisible tap area */
@media (pointer: coarse) {
  .fee-help-button {
    position: relative;
  }

  .fee-help-button::after {
    content: "";
    position: absolute;
    inset: -12px;
  }
}

/* Phone top bar location picker: long street names wrap to a second line instead of being cut off */
.nav-bar-container.mobile-header .filter-pill .dropdown-toggle > div {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
  white-space: normal;
  line-height: 1.15;
  display: -webkit-box;
  overflow: hidden;
}

/* Mobile pages: keep one scrolling content area clear of the floating navigation */
@media screen and (max-width: 991px) {
  /* Nested corners share a center: outer radius = inner radius + the inset. */
  :root {
    --mobile-control-height: 48px;
    --mobile-control-radius: calc(var(--mobile-control-height) / 2);
    --mobile-panel-inset: 16px;
    --mobile-panel-radius: calc(var(--mobile-control-radius) + var(--mobile-panel-inset));
    --mobile-card-inset: 12px;
    --mobile-card-radius: 32px;
    --mobile-image-size: 64px;
    /* Content lines up with the top and bottom bars, which sit 20px in from the page's edges */
    --mobile-gutter: 20px;
  }

  /* Scrolling content clears the 80px top and nav bars by one gutter: each bar is 20 + 80 from its edge.
     Sign-in pages (.yalko-user without .setup) keep the last commit's look, so the phone rules skip them. :where adds no specificity */
  .page:where(:not(.yalko-user), .setup) {
    --mobile-gutter: 20px;
    --mobile-bar-height: 80px;
    --mobile-nav-space: calc(var(--mobile-bar-height) + var(--mobile-gutter) * 2);
    --mobile-header-space: calc(var(--mobile-bar-height) + var(--mobile-gutter) * 2);
    justify-content: flex-start;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    padding-bottom: 0;
  }

  .page > .sections-container,
  .page .sections-container.booth.mobile {
    flex: none;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
    overflow: hidden;
  }

  .dropdown-link-2 {
    min-height: 44px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .orders-booth, .sections-container.booth.mobile > .prioducts-index {
    grid-row-gap: 14px;
    flex: none;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    margin-top: 0;
    padding: var(--mobile-header-space) var(--mobile-gutter) var(--mobile-nav-space);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .orders-booth > *, .prioducts-index > *, .order-products-details > *, .customer-orders-details > * {
    flex-shrink: 0;
  }

  .orders-booth > a {
    width: 100%;
    min-width: 0;
  }

  .order-card {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: wrap;
    height: auto;
    border-radius: 32px;
    min-height: 96px;
    padding: 16px;
  }

  .order-card-number-customer, .order-card-totals-types {
    grid-row-gap: 6px;
    flex: 1 1 115px;
    min-width: 0;
    padding: 0;
  }

  .order-card-number, .order-card-total {
    margin: 0;
    font-size: 22px;
    line-height: 28px;
    overflow-wrap: anywhere;
  }

  .order-card-customer {
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }

  .order-tags {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    flex-flow: wrap;
    height: auto;
    margin-right: 0;
  }

  .order-tag {
    height: auto;
    min-height: 32px;
    max-height: none;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 18px;
  }

  .order-tags a.order-tag, .order-tags button.order-tag, .order-tags form.order-tag {
    min-height: 44px;
  }

  /* BOOTH home: the location and Open/Close Store in the same floating bar as the other pages' search bars (80px, 10px in, pill ends) */
  .summary-heading-container.booth.mobile {
    box-sizing: border-box;
    grid-column-gap: 12px;
    background-color: var(--bg-glass);
    box-shadow: inset 0 0 15px -1px var(--inner-shadow), 0 0 15px 1px var(--outer-shadow);
    outline: .5px solid var(--border);
    border: 0;
    border-radius: 100px;
    align-items: center;
    width: auto;
    height: var(--mobile-bar-height);
    min-height: var(--mobile-bar-height);
    padding: 10px 10px 10px 24px;
    top: var(--mobile-gutter);
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
  }

  .summary-heading-container.booth.mobile .summary-total {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: 18px;
    line-height: 22px;
    overflow: hidden;
  }

  .summary-heading-container.booth.mobile .close-register {
    box-sizing: border-box;
    border-radius: 100px;
    flex: none;
    width: auto;
    height: 100%;
    padding: 0 20px;
  }

  /* The store button resets itself inline to a small font */
  .summary-heading-container.booth.mobile .close-register .btn-text {
    font-size: 15px !important;
    font-weight: 600;
    line-height: 22px;
  }

  .pagination-bar, .pagination-bar.reviews {
    flex: none;
    width: 100%;
    height: auto;
    border-radius: var(--mobile-control-radius);
    min-height: var(--mobile-control-height);
    margin-top: 4px;
    position: static;
  }

  /* Two lines of page info still fit the 48px bar */
  .pagination-number {
    flex: 1;
    min-width: 0;
    padding: 6px 4px;
  }

  .pagination-button.left, .pagination-button.right {
    flex: 0 0 auto;
    min-width: 44px;
    padding: 8px 12px;
  }

  .pagination-button-text {
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    overflow-wrap: anywhere;
  }

  .order-products-details, .customer-orders-details {
    grid-row-gap: 18px;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: var(--mobile-header-space) var(--mobile-gutter) var(--mobile-nav-space);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .order-details, .customer-details {
    height: auto;
    border-radius: var(--mobile-panel-radius);
    padding: var(--mobile-panel-inset);
    overflow-wrap: anywhere;
  }

  .order-date, .customer-email {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .order-products-title h1, .customer-orders-title h1, .customer-addresses-title h1 {
    font-size: 24px;
    line-height: 30px;
  }

  .order-mobile-tracking {
    height: 48px;
    min-height: 48px;
    max-height: none;
    font-size: 16px;
  }

  .order-option-action {
    min-height: 44px;
    padding: 8px 4px;
    font-size: 13px;
  }

  .btn-text {
    font-size: 15px;
    line-height: 21px;
  }

  /* Use the same 48px control box even when a button resets its own box sizing. */
  .page:where(:not(.yalko-user), .setup) .button, .pop-up .button, .yalko-terms-card .button {
    box-sizing: border-box !important;
    border-radius: var(--mobile-control-radius);
    height: auto !important;
    min-height: var(--mobile-control-height) !important;
    max-height: none;
    padding: 10px 12px;
    line-height: 22px;
    text-align: center;
  }

  .product-input, .sign-in-input:where(:not(.page.yalko-user:not(.setup) *)), .terms-field,
  .product-input.description, .product-input.category, .product-input.employees {
    border-radius: var(--mobile-control-radius);
  }

  .product-input {
    --mobile-input-padding: 12px;
  }

  .product-input > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]) {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 var(--mobile-input-padding) !important;
  }

  .sign-in-input:where(:not(.page.yalko-user:not(.setup) *)) {
    height: var(--mobile-control-height);
    min-height: var(--mobile-control-height);
  }

  .page.yalko-user.setup, .product-fields.settings-fields, .product-input.setup-check {
    --setup-pill: var(--mobile-control-radius);
  }

  .product-input.setup-check {
    height: auto;
    min-height: var(--mobile-control-height);
    padding: 6px var(--setup-switch-inset);
  }

  .yalko-user-card:not(.setup):where(:not(.page.yalko-user:not(.setup) *)), .yalko-terms-card {
    border-radius: var(--mobile-panel-radius);
    padding: var(--mobile-panel-inset);
  }

  .page:where(:not(.yalko-user), .setup) .sign-in-provider, .pop-up .sign-in-provider, .yalko-terms-card .sign-in-provider {
    object-fit: contain;
    flex: none;
    width: 28%;
    min-width: 0 !important; /* The sign-in logo has a fixed minimum inline. */
    max-width: 96px;
    height: auto;
    max-height: 96px;
  }

  .pop-up .sign-in-provider {
    width: 24%;
    max-width: 80px;
  }

  .page .setup-header-logo {
    width: 40px;
    max-width: 20%;
    height: auto;
  }

  .product-filter-nav, .customer-filter-nav, .order-filter-nav, .summary-tab-bar {
    border-radius: calc(var(--mobile-control-radius) + 8px);
    padding: 8px;
  }

  .product-filter-option, .customer-filter-option, .order-filter-option, .summary-tab {
    border-radius: var(--mobile-control-radius);
    height: var(--mobile-control-height);
    min-height: var(--mobile-control-height);
  }

  .summary-view-switch, .order-mobile-status .order-done-switch {
    box-sizing: border-box;
    border-radius: var(--mobile-control-radius);
    height: var(--mobile-control-height);
    min-height: var(--mobile-control-height);
  }

  .summary-view-switch .opt, .order-mobile-status .order-done-switch .opt {
    box-sizing: border-box;
    border-radius: calc(var(--mobile-control-radius) - 1px);
    justify-content: center;
    align-items: center;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 22px;
    display: flex;
  }

  /* Range chips: a 48px track like the Sales/Traffic switch, the chips fill it inside its 1px border */
  .summary-range-chips {
    box-sizing: border-box;
    grid-column-gap: 0;
    border-radius: var(--mobile-control-radius);
    height: var(--mobile-control-height);
    padding: 0;
  }

  .summary-range-chip {
    box-sizing: border-box;
    border-radius: calc(var(--mobile-control-radius) - 1px);
    justify-content: center;
    align-items: center;
    min-height: calc(var(--mobile-control-height) - 2px);
    padding: 8px 10px;
    line-height: 22px;
    display: flex;
  }

  .summary-date-input {
    border-radius: var(--mobile-control-radius);
  }

  .product-input.variant {
    border-radius: var(--mobile-control-radius) var(--mobile-control-radius) 0 0;
  }

  .product-input.options {
    border-radius: 0 0 var(--mobile-control-radius) var(--mobile-control-radius);
  }

  .variant-fields.title {
    margin-top: 0;
  }

  .new-variant-field .product-input.variant {
    padding-top: 12px !important;
  }

  .product-input:has(> select:only-of-type) {
    height: var(--mobile-control-height);
    min-height: var(--mobile-control-height);
    padding: 0;
  }

  /* Selects reset themselves inline, so the padding centers the text in the 48px field */
  .product-input > select:only-of-type {
    height: var(--mobile-control-height);
    min-height: var(--mobile-control-height) !important;
    padding: 14px var(--mobile-input-padding, 12px) !important;
    line-height: 20px !important;
  }

  .review-action {
    box-sizing: border-box;
    border-radius: var(--mobile-control-radius);
    width: var(--mobile-control-height);
    min-width: var(--mobile-control-height);
    height: var(--mobile-control-height) !important;
    padding: 12px;
  }

  .review-action-icon {
    object-fit: contain;
    width: 24px;
    max-height: 24px;
  }

  .order-tag {
    border-radius: 16px;
  }

  .order-options-card .product-price-container-card.products-page {
    margin-left: calc(var(--mobile-image-size) + 12px);
  }

  .option-info {
    height: auto;
    min-height: var(--mobile-control-height);
  }

  .option-image {
    border-radius: 12px;
    min-width: 48px;
    max-width: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  .add-image {
    width: var(--mobile-image-size);
    min-width: var(--mobile-image-size);
    height: var(--mobile-image-size);
  }

  .add-image.option {
    border-radius: 12px;
    width: var(--mobile-control-height);
    min-width: var(--mobile-control-height);
    height: var(--mobile-control-height);
    min-height: var(--mobile-control-height);
  }

  .setup-tile .add-image {
    width: var(--mobile-control-height);
    min-width: var(--mobile-control-height);
    height: var(--mobile-control-height);
  }

  .add-image .plus-v {
    width: 4px;
    height: 50%;
  }

  .add-image .plus-h {
    width: 50%;
    height: 4px;
  }

  .setup-tile .cancel-btn {
    box-sizing: border-box;
    border-radius: calc(var(--setup-media-radius) - 4px);
    width: calc((var(--setup-media-radius) - 4px) * 2);
    min-width: 0;
    max-width: none;
    height: calc((var(--setup-media-radius) - 4px) * 2);
    padding: 7px;
  }

  .setup-tile .cancel-btn::after {
    content: "";
    position: absolute;
    inset: -8px;
  }

  .setup-tile:has(input[name="header_logo_img"]) .product-image,
  .setup-tile:has(input[name="logo_img"]) .product-image,
  .setup-tile:has(input[name="favicon_img"]) .product-image,
  .setup-tile:has(input[name="apple_icon_img"]) .product-image {
    box-sizing: border-box;
    padding: clamp(12px, 8%, 24px);
  }

  /* Existing desktop management panels stack on phones; the register keeps its own mobile view */
  .page.mobile-management > .sections-container:not(.booth) {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--mobile-gutter) var(--mobile-gutter) var(--mobile-nav-space);
  }

  .page.mobile-management .sections-container.booth.mobile {
    display: none;
  }

  .mobile-management .section.products.desktop,
  .mobile-management .section.summary.desktop,
  .mobile-management .section.devolopment.desktop {
    grid-row-gap: 16px;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    display: flex;
  }

  .mobile-management .section > .nav-bar-container {
    padding: 0;
  }

  .mobile-management .product-page-container,
  .mobile-management .summary-page-container {
    grid-row-gap: 16px;
    flex-flow: column;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: visible;
  }

  .mobile-management .side-nav,
  .mobile-management .summary-page,
  .mobile-management .employees-report {
    grid-row-gap: 16px;
    flex: none;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0;
  }

  .mobile-management .summary-tab-bar {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    flex-flow: row;
    overflow-x: auto;
  }

  .mobile-management .summary-tab {
    flex: 1 0 110px;
    height: auto;
    min-height: 48px;
  }

  .mobile-management .summary-filter-option-text,
  .mobile-management .product-filter-option-text {
    font-size: 14px;
    line-height: 20px;
  }

  .mobile-management .prioducts-index, .mobile-management .reviews-index {
    grid-row-gap: 12px;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .sections-container.booth.mobile > .product-page-container {
    grid-row-gap: 16px;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    padding: var(--mobile-header-space) var(--mobile-gutter) var(--mobile-nav-space);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .mobile-management #section-image-form {
    display: none;
  }

  .mobile-management .product-input {
    min-width: 0;
    max-width: none;
  }

  .product-page-container .products-showpage-half {
    flex: none;
    min-width: 0;
    padding: 0;
  }

  .product-page-container .product-info {
    flex: none;
    height: auto;
    border-radius: var(--mobile-panel-radius);
  }

  .product-page-container .product-fields {
    height: auto;
    max-height: none;
    padding-top: 16px;
    padding-bottom: 16px;
    overflow: visible;
  }

  .product-page-container .product-fields.inventory {
    margin-top: 0;
    padding-bottom: 16px;
  }

  .product-field {
    min-width: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  .product-field.price {
    flex: 1;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .product-field-title {
    font-size: 14px;
    line-height: 21px;
    overflow-wrap: anywhere;
  }

  .product-input:not(.category):not(.options):not(.variant):not(.employees):not(.description):not(.setup-check):not(:has(select)) {
    height: var(--mobile-control-height);
    min-height: var(--mobile-control-height);
  }

  .product-input input, .product-input select, .product-input textarea,
  .sign-in-input input:where(:not(.page.yalko-user:not(.setup) *)),
  .sign-in-input select:where(:not(.page.yalko-user:not(.setup) *)), .summary-date-input {
    box-sizing: border-box !important;
    min-width: 0 !important;
    font-size: 16px !important; /* Several existing forms reset their controls with inline all: unset. */
    -webkit-user-select: text;
    user-select: text;
  }

  .product-input input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  .sign-in-input input:not([type="checkbox"]):not([type="radio"]):where(:not(.page.yalko-user:not(.setup) *)) {
    min-height: 44px !important;
  }

  .product-title-inventory {
    font-size: 24px;
    line-height: 30px;
    overflow-wrap: anywhere;
  }

  .buttons-group {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: wrap;
    padding: 0 16px;
  }

  .buttons-group .button.create-product,
  .product-fields > .button.create-product {
    flex: 1 1 180px;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
    min-height: var(--mobile-control-height);
    height: auto;
    margin: 0;
    padding: 10px 12px;
    text-align: center;
  }

  .product-fields > .button.create-product {
    flex: none;
    margin: 0 16px;
  }

  .button.create-product-inventory, .mobile-management .button.export-report {
    box-sizing: border-box;
    height: auto;
    min-height: var(--mobile-control-height);
    margin: 0;
    position: static;
  }

  .button.create-product-inventory {
    box-sizing: border-box;
    width: calc(100% - 32px);
    margin: 12px 16px 0;
  }

  .products-showpage-half > form.button_to .button.create-product {
    box-sizing: border-box;
    width: 100% !important;
    margin: 12px 0 0;
  }

  .mobile-management .side-options .button.option-tab {
    flex: 1 1 100px;
    width: auto;
  }

  .mobile-management .side-options {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    flex-flow: wrap;
    padding: 12px;
    position: static;
  }

  .mobile-management .product-fields.side-option {
    max-height: none;
    padding-top: 16px;
  }

  .mobile-management .summary-heading-container {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: wrap;
    height: auto;
    padding: 12px 0;
    position: relative;
  }

  .mobile-management .summary-total, .pop-up .summary-total {
    flex-wrap: wrap;
    min-width: 0;
    font-size: 16px;
    line-height: 24px;
  }

  .mobile-management .summary-heading-container .filter-pill {
    border-radius: var(--mobile-control-radius);
    width: 100% !important;
    height: var(--mobile-control-height);
    min-height: var(--mobile-control-height);
    margin: 0;
  }

  /* Webflow's toggle padding made the location pill 60px tall */
  .mobile-management .summary-heading-container .filter-pill .dropdown-toggle {
    box-sizing: border-box;
    justify-content: center;
    padding: 0 16px;
  }

  .mobile-management input[type="date"], .pop-up input[type="date"] {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100%;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .mobile-management .product-input:has(select) {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    flex-flow: wrap;
    height: auto;
    min-height: var(--mobile-control-height);
    padding: 8px;
  }

  .mobile-management .product-input > select {
    flex: 1 1 80px !important;
    width: auto !important;
    min-height: 44px !important;
  }

  .mobile-management .product-input:has(> select:only-of-type) {
    height: var(--mobile-control-height);
    min-height: var(--mobile-control-height);
    padding: 0;
  }

  .mobile-management .employees-report-result {
    height: auto;
    max-height: none;
  }

  .mobile-management .report-table {
    min-width: 0;
    padding: 16px;
    overflow-x: auto;
  }

  .mobile-management .v-buttons {
    grid-row-gap: 12px;
    flex-flow: column;
    height: auto;
    padding: 16px 0 0;
    position: static;
  }

  .mobile-management .fading-container, .mobile-management .fading {
    display: none;
  }

  .mobile-management .dev-container {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 16px;
    overflow-x: auto;
  }

  .mobile-management .dev-container {
    color: #fff;
    overflow-wrap: anywhere;
  }

  .mobile-management .dev-container form,
  .mobile-management .dev-container form > div {
    grid-row-gap: 12px;
    flex-flow: column;
    display: flex;
  }

  .mobile-management .dev-container form {
    margin-bottom: 24px;
  }

  .mobile-management .dev-container input:not([type="hidden"]):not([type="checkbox"]),
  .mobile-management .dev-container select,
  .mobile-management .dev-container textarea,
  .mobile-management .dev-container button {
    box-sizing: border-box;
    color: #fff;
    background-color: var(--input-field);
    box-shadow: inset 0 0 25px 5px var(--inner-shadow);
    border: .5px solid var(--border);
    border-radius: 24px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    padding: 12px;
    font-family: inherit;
    font-size: 16px;
    line-height: 22px;
    -webkit-user-select: text;
    user-select: text;
  }

  .mobile-management .dev-container textarea {
    min-height: 160px;
    resize: vertical;
  }

  .mobile-management .dev-container input[type="submit"],
  .mobile-management .dev-container button {
    color: #000;
    background-color: var(--selected-glass);
    box-shadow: inset 0 0 25px 1px var(--selected-inner-shadow);
    cursor: pointer;
  }

  /* Catalog cards and variant controls keep their content in the normal flow */
  .product-card.index {
    --mobile-tile-radius: var(--mobile-card-radius);
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    border-radius: var(--mobile-tile-radius);
    min-height: calc(var(--mobile-image-size) + var(--mobile-card-inset) * 2);
    padding: var(--mobile-card-inset);
  }

  .product-info .product-card.index {
    --mobile-tile-radius: var(--mobile-control-radius);
  }

  .product-card.index .product-img-container-card {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .product-card.index .product-img {
    border-radius: calc(var(--mobile-tile-radius) - var(--mobile-card-inset));
    flex: none;
    width: var(--mobile-image-size);
    min-width: 0;
    max-width: var(--mobile-image-size);
    height: var(--mobile-image-size);
    min-height: 0;
    margin-right: 12px;
  }

  .product-card.index .product-desc-card {
    min-width: 0 !important; /* The mobile catalog sets a percentage minimum inline. */
    margin-left: 0;
    overflow-wrap: anywhere;
  }

  .product-card.index .product-price-container-card.products-page {
    flex: none;
    width: auto;
    min-width: 0;
    padding: 0;
    position: static;
  }

  .mobile-management .product-card.index:not(:has(.product-img)) {
    min-height: 64px;
    align-items: center;
  }

  .product-info .product-field.images:not(.setup-tile) > .product-images-field {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    padding-left: var(--mobile-panel-inset);
    padding-right: var(--mobile-panel-inset);
  }

  .product-info .product-field.images:not(.setup-tile) .product-image {
    border-radius: var(--mobile-control-radius);
    min-width: 0;
    max-width: 112px;
    max-height: 112px;
  }

  .product-input.variant {
    grid-row-gap: 8px;
    height: auto !important;
    padding: 12px;
  }

  .variant-fields.title > div, .option-name {
    flex: 1;
    min-width: 0;
  }

  .variant-fields.fields, .option-prices {
    grid-column-gap: 12px;
    grid-row-gap: 10px;
    flex-flow: wrap;
    padding-right: 0;
  }

  .product-field.price.option {
    grid-column-gap: 6px;
    flex: 1 1 120px;
    justify-content: space-between;
  }

  .product-field-title.option {
    flex: 1;
    font-size: 12px;
    line-height: 18px;
  }

  .product-input.option {
    --mobile-input-padding: 0px;
    flex: none;
    padding: 0 8px !important;
    width: 76px;
    height: var(--mobile-control-height);
  }

  .product-input.option.boolean {
    width: var(--mobile-control-height);
    min-width: var(--mobile-control-height);
    height: var(--mobile-control-height);
  }

  .variant-fields .cancel-btn {
    box-sizing: border-box;
    border-radius: calc(var(--mobile-control-radius) - 12px);
    width: var(--mobile-control-height);
    min-width: var(--mobile-control-height);
    max-width: var(--mobile-control-height);
    height: var(--mobile-control-height);
    padding: 12px;
  }

  .option-option.booth {
    grid-row-gap: 8px;
    flex: none;
    height: auto;
    min-height: 0;
    padding: 12px;
  }

  .category-option {
    flex: none;
    padding: 12px;
    line-height: 22px;
    overflow-wrap: anywhere;
  }

  .shipping-paragraph .product-input {
    width: 100px;
    min-width: 90px;
    max-width: 100%;
    margin: 8px 4px;
  }

  .review-card.index {
    grid-row-gap: 12px;
    border-radius: var(--mobile-panel-radius);
    flex-flow: column;
    min-height: 0;
    padding: 16px;
  }

  .review-details-card, .review-info {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .review-actions {
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    padding-top: 0;
  }

  .review-answer, .review-question {
    font-size: 14px;
    line-height: 21px;
  }

  .review-actions-container {
    height: 48px;
  }

  /* Summary, setup and account cards use the same readable mobile controls */
  .summary-overview.mobile {
    padding: var(--mobile-gutter) var(--mobile-gutter) var(--mobile-nav-space);
  }

  .summary-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-date-input {
    min-height: 44px;
  }

  .summary-chart-header {
    grid-column-gap: 12px;
    grid-row-gap: 4px;
    flex-flow: wrap;
  }

  .summary-funnel-value, .setup-user-name, .setup-hint {
    overflow-wrap: anywhere;
  }

  .setup-check span {
    padding-left: 0;
    text-align: left;
    line-height: 20px;
  }

  .pop-up .yalko-user-card,
  .select-location-container .yalko-user-card {
    flex: none;
    width: 100%;
    min-width: 0;
    max-width: 460px;
    max-height: none;
  }

  .pop-up {
    align-items: safe center;
    height: 100dvh;
    padding: 16px;
    overflow-y: auto;
  }

  .page.select-location {
    padding: 32px var(--mobile-gutter) var(--mobile-nav-space);
    overflow-y: auto;
  }

  .select-location-container {
    padding: 0;
  }

  .select-location-container > * {
    width: 100%;
    min-width: 0;
  }

  .sign-in-page-title {
    margin-bottom: 24px;
    font-size: 30px;
    line-height: 36px;
  }

  .location-image {
    object-fit: cover;
    min-height: 180px;
    max-height: 180px;
  }

  .yalko-terms-card {
    width: calc(100% - 32px);
    min-width: 0;
    max-height: calc(100dvh - 32px);
    margin: 16px;
    padding: 16px;
    overflow-y: auto;
  }

  .yalko-terms-card .terms-heading {
    font-size: 28px;
    line-height: 34px;
  }

  .yalko-terms-card .terms-field {
    flex: 1 0 180px;
    height: auto;
    min-height: 180px;
    max-height: 45dvh;
  }

  .yalko-terms-card .v-buttons {
    grid-column-gap: 10px;
    height: auto;
    padding: 0;
    position: static;
  }

  .yalko-terms-card .v-buttons > * {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  .yalko-terms-card .button.terms {
    width: 100% !important;
    min-width: 0;
  }
}

@media screen and (max-width: 767px) {
  .product-field.price-fields {
    flex-flow: column;
    grid-row-gap: 16px;
  }

  .product-field.price-fields > .product-field.price {
    flex: none;
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .product-card.index:not(.order-options-card) {
    flex-flow: wrap;
  }

  .product-card.index:not(.order-options-card) .product-img-container-card {
    flex-basis: 100%;
  }

  .product-card.index:not(.order-options-card) .product-price-container-card.products-page {
    flex-flow: row;
    grid-column-gap: 8px;
    margin-left: calc(var(--mobile-image-size) + 12px);
  }

  .summary-funnel {
    grid-column-gap: 6px;
    padding: 12px;
  }

  .summary-funnel-value {
    font-size: 20px;
    line-height: 26px;
  }

  .summary-funnel-label {
    font-size: 12px;
    line-height: 18px;
  }

  .setup-day {
    grid-row-gap: 8px;
    grid-template-columns: minmax(0, 1fr);
  }

  .setup-actions {
    grid-row-gap: 8px;
    flex-wrap: wrap;
  }

  .setup-actions > .button:last-child:nth-child(3) {
    flex-basis: 100%;
  }

  .mobile-management .product-field:has(#entree-search) > div:has(#toggle-all-entrees) {
    flex-wrap: wrap;
  }

  .mobile-management .product-input:has(#entree-search) {
    flex-basis: 100% !important;
  }

  .mobile-management #toggle-all-entrees {
    box-sizing: border-box;
    width: 100%;
    height: 48px !important;
    min-height: 48px;
  }

}

/* Account forms share the existing sign-in card and keep secondary actions outside the form */
.registration-form {
  grid-row-gap: 20px;
  flex-flow: column;
  min-width: 0;
  display: flex;
}

.registration-card #error_explanation {
  color: #fff;
  overflow-wrap: anywhere;
}

.registration-card .button_to .button {
  box-sizing: border-box;
  width: 100%;
  margin-top: 12px;
  padding: 0 12px;
  text-align: center;
}

.registration-card .sign-infield-label .button_to .button {
  color: #000;
}

/* The account forms (sign up, edit and set up) can be taller than the screen, so their page scrolls instead of cutting the card off.
   The card's auto margins still center it when it fits */
.page.yalko-user:has(.registration-card, .account-setup) {
  justify-content: flex-start;
  overflow-y: auto;
}

.page.yalko-user .yalko-user-card.registration-card,
.page.yalko-user .yalko-user-card.account-setup {
  flex: none;
  max-height: none;
  margin-top: auto;
  margin-bottom: auto;
}

/* More menu: on phones the side menu's pages and Sign Out open from a sheet next to the Sales/Traffic switch.
   Reviews and Payments get a back-to-Summary header with their filters as a switch instead of the side menu */
.more-menu-row, .more-menu-button, .more-menu, .management-phone-header {
  display: none;
}

@media screen and (max-width: 991px) {
  /* The Summary and Traffic top bar: the switch and the More button, 8px in like the other top bars */
  .more-menu-row {
    grid-column-gap: 8px;
    align-items: center;
    display: flex;
  }

  /* The switch fills the bar's 60px inner height like the location pill in the search bars, 10px in from the 40px ends */
  .more-menu-row .summary-view-switch {
    border-radius: 100px;
    flex: 1;
    min-width: 0;
    height: 100%;
  }

  .more-menu-row .summary-view-switch .opt {
    border-radius: 100px;
  }

  /* The same glass pill as the search and back buttons in the other top bars (60px wide, the bar's inner height) */
  .more-menu-button {
    box-sizing: border-box;
    grid-column-gap: 4px;
    cursor: pointer;
    background-color: var(--selected-glass);
    box-shadow: 0 0 25px -1px var(--selected-outer-shadow), inset 0 0 25px 1px var(--selected-inner-shadow);
    border: 0;
    border-radius: 100px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 60px;
    min-width: 60px;
    height: 100%;
    padding: 0;
    display: flex;
  }

  .more-menu-button span {
    background-color: #000;
    border-radius: 50%;
    width: 5px;
    height: 5px;
  }

  /* In the More pages' top bars the title covers the whole bar, so the button sits above it like the back button */
  .heading-search-bar > .more-menu-button {
    z-index: 15;
    position: relative;
  }

  /* A top bar with a search button (a single payment) keeps it next to the More button, 10px apart,
     and the search text stops before both (60 + 10 + 60 + 15) */
  .heading-search-bar > .search-btn + .more-menu-button {
    margin-left: 10px;
  }

  .heading-search-bar:has(> .search-btn + .more-menu-button) > .search-btn {
    margin-left: auto;
  }

  .heading-search-bar:has(> .search-btn + .more-menu-button) > .search-input {
    padding-right: 145px;
  }

  /* Same layer as the nav bar and the pop-ups, it comes after the nav bar in the page so it covers it */
  .more-menu {
    z-index: 9999;
    opacity: 0;
    -webkit-backdrop-filter: blur(var(--frosting));
    backdrop-filter: blur(var(--frosting));
    background-color: #0000004d;
    flex-flow: column;
    justify-content: flex-end;
    padding: var(--mobile-gutter);
    transition: opacity .2s;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .more-menu[hidden] {
    display: none;
  }

  .more-menu.open {
    opacity: 1;
  }

  /* Rises from where the nav bar is with the nav bar's 40px corners: its 48px rows sit 16px in (24 + 16) */
  .more-menu-sheet.summary-tab-bar {
    box-sizing: border-box;
    grid-row-gap: 8px;
    border-radius: calc(var(--mobile-control-radius) + 16px);
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 16px;
    transition: transform .2s;
    transform: translateY(24px);
  }

  .more-menu.open .more-menu-sheet {
    transform: none;
  }

  /* A faint pill so each row reads as a button on the glass */
  .more-menu-item.summary-tab {
    box-sizing: border-box;
    grid-column-gap: 8px;
    color: #fff;
    cursor: pointer;
    background-color: #ffffff14;
    border: 0;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 22px;
    text-decoration: none;
    display: flex;
  }

  .more-menu-item.summary-tab:active {
    color: #000;
    background-color: var(--selected-glass);
  }

  .more-menu-badge {
    color: #fff;
    text-align: center;
    background-color: var(--notice);
    border-radius: 11px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    line-height: 22px;
  }

  .more-menu .button {
    box-sizing: border-box;
    cursor: pointer;
    border-radius: var(--mobile-control-radius);
    width: 100%;
    min-height: var(--mobile-control-height);
  }

  .more-menu .button.cancel .btn-text {
    color: #fff;
  }

  .pop-up.more-menu-pop-up {
    transition: opacity .2s;
  }

  /* Reviews and Payments: the side menu's pages are in the More menu, the header and filters stay */
  .mobile-management .side-nav > :not(.management-phone-header) {
    display: none;
  }

  .management-phone-header {
    grid-row-gap: 12px;
    flex-flow: column;
    width: 100%;
    display: flex;
  }

  .management-phone-title {
    align-items: center;
    margin: 0;
    display: flex;
  }

  .management-phone-filter .opt {
    min-width: 0;
    text-decoration: none;
  }

  /* More pages: the top bar stays put 20px in like the other pages' top bars, and the page scrolls under it.
     It's only as tall as the bar: on small phones .nav-bar-container fills the screen (it's also the nav bar's box),
     which would cover the page and catch its scrolling */
  .mobile-management .section > .nav-bar-container,
  .management-phone-header {
    z-index: 1000;
    width: auto;
    height: auto;
    position: fixed;
    top: var(--mobile-gutter);
    bottom: auto;
    left: var(--mobile-gutter);
    right: var(--mobile-gutter);
  }

  /* The filters float over the page too, so they get the bar's frosted glass */
  .management-phone-filter {
    -webkit-backdrop-filter: blur(var(--frosting));
    backdrop-filter: blur(var(--frosting));
  }

  /* The side menu only holds the phone header on phones, so it gives up its own box and the gap after it */
  .mobile-management .side-nav {
    display: contents;
  }

  /* The content starts one gutter under the bar, or under the filters when the page has them (12px under the bar) */
  .page.mobile-management > .sections-container:has(.section > .nav-bar-container, .management-phone-header) {
    padding-top: var(--mobile-header-space);
  }

  .page.mobile-management > .sections-container:has(.management-phone-header > .management-phone-filter) {
    padding-top: calc(var(--mobile-header-space) + var(--mobile-control-height) + 12px);
  }
}

/* Review cards: the question and answer sizes used to be inline */
.review-card-question {
  font-size: 15px;
}

.review-card-answer {
  padding-bottom: 5px;
  font-size: 20px;
}

/* Phone versions of the side menu's pages (Reviews, Payments, Discounts, Business) */
@media screen and (max-width: 991px) {
  .review-card .review-stars {
    font-size: 18px;
    line-height: 24px;
  }

  .review-card-question {
    font-size: 14px;
    line-height: 21px;
  }

  .review-card-answer {
    font-size: 16px;
    line-height: 22px;
  }

  .mobile-management .nothing-found {
    font-size: 22px;
    line-height: 28px;
  }

  /* Review cards listed inside a panel (Create Review) sit 16px in, so their corners are the panel's minus 16 */
  .product-info .review-card.index {
    border-radius: calc(var(--mobile-panel-radius) - var(--mobile-panel-inset));
  }

  /* Return and Put back sit in the item card's bottom corner 12px in, so their corners follow the card's (32 - 12) like the photo's */
  .order-options-card button.order-tag,
  .order-options-card a.order-tag,
  .order-options-card form.order-tag {
    border-radius: calc(var(--mobile-card-radius) - var(--mobile-card-inset));
    padding: 0 14px;
    font-size: 14px;
  }

  /* Summary tiles, chart and funnel share the order cards' corners: 32px with 16px in */
  .summary-tile, .summary-chart, .summary-funnel {
    border-radius: var(--mobile-card-radius);
    padding: 16px;
  }

  /* Settings links (Business, Location, Locations) are the desktop cards: one 145px height for every link, 35px corners
     and the name in the top corner (10px + 15px in), 15px apart */
  .mobile-management .product-info .product-card.index:not(:has(.product-img)) {
    border-radius: 35px;
    align-items: flex-start;
    min-height: 145px;
    padding: 10px;
  }

  .mobile-management .product-info .product-card.index:not(:has(.product-img)) .product-desc-card {
    margin-left: 15px;
  }

  .mobile-management .product-fields:has(> .product-field > a.product-card.index) {
    grid-row-gap: 15px;
  }

  /* Cards without actions (payments that were never disputed) don't keep an empty action row */
  .review-card .review-actions:not(:has(.review-action)) {
    display: none;
  }

  /* Payments dates: two fields side by side, same glass pill as the Summary dates. The fields reset themselves inline */
  .mobile-management #date-range-form .summary-total {
    grid-column-gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    display: grid !important;
  }

  .mobile-management #date-range-form .summary-total > div {
    grid-row-gap: 6px;
    flex-flow: column;
    min-width: 0;
    display: flex;
  }

  .mobile-management #date-range-form label {
    font-size: 14px;
    line-height: 20px;
  }

  .mobile-management #date-range-form input[type="date"] {
    box-sizing: border-box !important;
    color: #fff !important;
    color-scheme: dark;
    background: #0000004a !important;
    border: 1px solid #ffffff4d !important;
    border-radius: var(--mobile-control-radius) !important;
    width: 100% !important;
    height: var(--mobile-control-height) !important;
    padding: 0 14px !important;
  }
}

/* The More menu's blur has the page's rounded corners on phones */
@media screen and (max-width: 479px) {
  .more-menu {
    border-radius: 60px;
  }
}

/* Products list: the photo keeps the last commit's size (100px, 125px from 768px) and corners: a 25px photo 10px in a 35px card */
@media screen and (max-width: 991px) {
  .prioducts-index {
    --product-list-image: 125px;
  }

  .prioducts-index .product-card.index {
    border-radius: 35px;
    min-height: calc(var(--product-list-image) + 20px);
    padding: 10px;
  }

  .prioducts-index .product-card.index .product-img {
    border-radius: 25px;
    width: var(--product-list-image);
    max-width: var(--product-list-image);
    height: var(--product-list-image);
    margin-right: 15px;
  }
}

@media screen and (max-width: 767px) {
  .prioducts-index {
    --product-list-image: 100px;
  }
}

/* Phones: the name and price share the column next to the photo, so the price stays inside the card */
@media screen and (max-width: 479px) {
  .prioducts-index .product-card.index {
    grid-column-gap: 15px;
    grid-row-gap: 6px;
    grid-template-rows: auto 1fr;
    grid-template-columns: var(--product-list-image) minmax(0, 1fr);
    align-items: start;
    display: grid;
  }

  .prioducts-index .product-card.index .product-img-container-card {
    display: contents;
  }

  .prioducts-index .product-card.index .product-img {
    grid-row: 1 / span 2;
    margin-right: 0;
  }

  .prioducts-index .product-card.index .product-price-container-card.products-page {
    grid-column: 2;
    align-self: end;
    margin-left: 0;
  }
}

/* Product photos: square tiles that fill their grid cells, with the add tile the same square. The remove X is a 28px circle
   inside each photo's corner, as far in as the corner's radius minus its own (25 - 14 on desktop, 24 - 14 on phones) */
.product-field.images:not(.setup-tile) {
  --product-photo-radius: 25px;
}

.product-field.images:not(.setup-tile) > .product-images-field {
  align-items: stretch;
}

.product-field.images:not(.setup-tile) .product-images-field > .product-images {
  min-width: 0;
}

.product-info .product-field.images:not(.setup-tile) .product-image {
  border-radius: var(--product-photo-radius);
  width: 100%;
  max-width: none;
  max-height: none;
}

.product-field.images:not(.setup-tile) .remove-variant.product-images {
  inset: calc(var(--product-photo-radius) - 14px) calc(var(--product-photo-radius) - 14px) auto auto;
}

.product-field.images:not(.setup-tile) .cancel-btn {
  box-sizing: border-box;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  padding: 8px;
}

.product-field.images:not(.setup-tile) .cancel-btn img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* The small X keeps a finger-sized tap area */
.product-field.images:not(.setup-tile) .cancel-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.product-field.images:not(.setup-tile) .add-image {
  aspect-ratio: 1;
  border-radius: var(--product-photo-radius);
  width: 100%;
  min-width: 0;
  height: auto;
}

.product-field.images:not(.setup-tile) .add-image .plus-v {
  width: 4px;
  height: 36%;
}

.product-field.images:not(.setup-tile) .add-image .plus-h {
  width: 36%;
  height: 4px;
}

/* Phones: as many tiles per row as fit (three on most phones), with the phone's 24px corners */
@media screen and (max-width: 991px) {
  .product-field.images:not(.setup-tile) {
    --product-photo-radius: var(--mobile-control-radius);
  }

  .product-info .product-field.images:not(.setup-tile) > .product-images-field {
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  }

  .product-field.images:not(.setup-tile) .add-image .plus-v {
    width: 3px;
  }

  .product-field.images:not(.setup-tile) .add-image .plus-h {
    height: 3px;
  }
}

/* Product page options: each variant is a short header (its name, a Required pill and a "Choose up to" pill) over a list.
   The list names its columns once (Default, Weight, Price), so every option is one quiet row: image (BOOTH), name, then its fields.
   KOFIA and RAKWA ship, so their rows add a weight column (with-weight); BOOTH rows show the option image instead.
   The list is narrow first (the name on its own line, the fields under it) and puts each option on one line once it is wide enough.
   The fields hold their unit ($, lb). Inputs are named with their parent so they win over the page's own input reset (input[type="text"]).
   Nested corners share a center: everything sits one inset (12px) in from the boxes on every side, and the controls round by the box radius minus that inset */
.variant-field:not(.new-variant-field) {
  --option-box-radius: 30px;
  --option-inset: 12px;
  --option-inner-radius: calc(var(--option-box-radius) - var(--option-inset));
  --option-check-size: 18px;
  --option-gap: 10px;
  --option-field-height: 36px;
  --option-default-size: 30px;
  --option-default-column: 48px;
  --option-image-size: 40px;
}

.variant-field:not(.new-variant-field) .product-input.variant {
  grid-row-gap: var(--option-inset);
  border-radius: var(--option-box-radius) var(--option-box-radius) 0 0;
  height: auto;
  padding: var(--option-inset);
  font-size: 18px;
  line-height: 24px;
}

.variant-field:not(.new-variant-field) .product-input.options {
  border-radius: 0 0 var(--option-box-radius) var(--option-box-radius);
}

.variant-field .variant-fields.title {
  grid-column-gap: 12px;
  margin-top: 0;
}

.variant-field .variant-fields.title > div {
  flex: 1;
  min-width: 0;
}

/* The delete button is a control like the pills, so it sits one inset from the top and the side and rounds to match the corner */
.variant-field:not(.new-variant-field) .variant-fields.title .remove-variant {
  width: auto;
  height: auto;
}

/* The phone rules give inputs a 44px minimum with !important, which would push the delete button down off its inset. The row is the button's height */
.variant-field:not(.new-variant-field) .variant-fields.title input.variant-name-input {
  min-height: 0 !important;
}

.variant-field:not(.new-variant-field) .variant-fields.title .cancel-btn {
  box-sizing: border-box;
  border-radius: var(--option-inner-radius);
  width: var(--option-field-height);
  min-width: var(--option-field-height);
  max-width: var(--option-field-height);
  height: var(--option-field-height);
  padding: calc(var(--option-field-height) / 4);
}

.variant-field .variant-fields.fields {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: wrap;
  justify-content: flex-start;
  margin-top: 0;
  padding-right: 0;
}

/* Variant settings: the whole Required pill is the switch, the limit pill focuses its number.
   The phone rules size and pad every .product-input with !important (or eight classes), so these controls set theirs with !important too */
.variant-field .product-input.option.variant-setting {
  box-sizing: border-box;
  grid-column-gap: 8px;
  flex: none;
  justify-content: flex-start;
  width: auto;
  min-width: 0;
  height: var(--option-field-height) !important;
  min-height: 0 !important;
  margin: 0;
  border-radius: var(--option-inner-radius);
  padding: 0 14px !important;
  font-size: 13px;
  line-height: 16px;
  cursor: pointer;
}

/* The Required circle sits the same distance from the pill's top, bottom and left edge, so on the round pill it shares the corner's center */
.variant-field .product-input.option.variant-setting.variant-required-checkbox {
  --option-check-inset: calc((var(--option-field-height) - var(--option-check-size)) / 2);
  padding-left: var(--option-check-inset) !important;
}

.variant-field .product-input.option.variant-setting.active,
.variant-field .product-input.option.variant-setting:focus-within {
  background-color: var(--input-field);
  outline-color: var(--selected-glass);
}

.variant-field .option-check {
  box-sizing: border-box;
  box-shadow: inset 0 0 10px 2px var(--inner-shadow);
  outline: .5px solid var(--border);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: var(--option-check-size);
  height: var(--option-check-size);
  display: flex;
}

.variant-field .option-check .boolean-checked {
  width: 10px;
  min-width: 10px;
  height: 10px;
}

/* The limit pill is the dropdown itself: the select fills it edge to edge, so a click anywhere opens the list, and every choice is the full
   "Choose up to N" sentence. It is stripped of its own look so it reads like the Required pill's text, and sizes to its longest sentence.
   The phone and narrow desktop rules size every select in a .product-input with !important, so this one resets them with !important too */
.variant-field .product-input.option.variant-setting.selection-limit {
  padding: 0 !important;
}

.variant-field .variant-setting select.variant-selection-limit-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: inherit;
  box-shadow: none;
  outline: none;
  flex: none !important;
  width: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 14px !important;
  font: inherit;
  font-size: inherit !important;
  line-height: inherit !important;
}

.variant-field .variant-setting select.variant-selection-limit-input option {
  color: #000;
}

/* The list measures its own width, so the rows switch layout the same way in every page layout.
   Only the rows scroll, so the column header above them stays in view. The rows hide their scrollbar like the other lists, so they line up with the header */
.variant-field .product-input.options {
  container: options / inline-size;
  overflow: hidden;
}

.option-rows {
  scrollbar-width: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.option-rows::-webkit-scrollbar {
  display: none;
}

.option-rows > .option-option.booth:first-child {
  border-top-style: none;
}

/* The fields keep one size in both layouts and line up on the right, under their column titles */
.option-columns,
.option-option.booth {
  --option-columns: var(--option-default-column) 96px;
  box-sizing: border-box;
  grid-column-gap: 12px;
  grid-row-gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  flex: none;
  align-items: center;
  height: auto;
  min-height: 0;
  padding: var(--option-inset);
  display: grid;
}

.option-columns.with-weight,
.option-option.booth.with-weight {
  --option-columns: var(--option-default-column) 84px 96px;
}

.option-columns .option-info,
.option-option.booth .option-info {
  grid-column-gap: var(--option-gap);
  justify-content: flex-start;
  height: auto;
  min-height: 0;
}

.option-columns .option-prices,
.option-option.booth .option-prices {
  grid-column-gap: var(--option-gap);
  grid-template-columns: var(--option-columns);
  justify-content: end;
  align-items: center;
  width: 100%;
  margin-top: 0;
  padding-right: 0;
  display: grid;
}

/* Column header: small titles over the fields, fixed above the rows. On a narrow list it only names the fields row */
.option-columns {
  border-bottom: 1px solid var(--border);
  color: #ffffffa6;
  padding-top: 10px;
  padding-bottom: 8px;
  font-size: 11px;
  line-height: 14px;
}

.option-columns .option-info,
.option-option.booth .create-option-url {
  display: none;
}

.option-columns .option-prices > div {
  text-align: center;
}

.option-option.booth .option-image-wrapper,
.option-option.booth .option-image-space {
  flex: none;
  width: var(--option-image-size);
  height: var(--option-image-size);
}

.option-option.booth .option-image,
.option-option.booth .add-image.option {
  box-sizing: border-box;
  border-radius: 12px;
  width: var(--option-image-size);
  min-width: var(--option-image-size);
  max-width: var(--option-image-size);
  height: var(--option-image-size);
  min-height: var(--option-image-size);
  max-height: var(--option-image-size);
  cursor: pointer;
}

/* A thinner plus, so options without an image stay quiet in the list */
.option-option.booth .add-image.option .plus-v {
  width: 3px;
  height: 40%;
}

.option-option.booth .add-image.option .plus-h {
  width: 40%;
  height: 3px;
}

.option-option.booth .option-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 22px;
}

/* The name fills its row and ends in "..." when it is longer, clicking it shows the rest.
   It is edited in place, the soft field reaches past the text so the text stays in line with the column */
.option-name input.option-name-input {
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 10px;
  width: calc(100% + 16px);
  max-width: none;
  margin: -4px -8px;
  padding: 4px 8px;
  transition: background-color .2s;
  overflow: hidden;
}

.option-name input.option-name-input:hover,
.option-name input.option-name-input:focus {
  background-color: var(--input-field);
}

.option-name input.option-name-input:focus {
  outline: .5px solid var(--border);
  text-overflow: clip;
}

.option-option.booth .product-input.option.boolean {
  box-sizing: border-box;
  justify-self: center;
  width: var(--option-default-size);
  min-width: var(--option-default-size);
  height: var(--option-default-size) !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  cursor: pointer;
}

.option-option.booth .product-input.option.boolean .boolean-checked {
  width: 14px;
  min-width: 14px;
  height: 14px;
}

.option-option.booth .product-input.option:not(.boolean) {
  box-sizing: border-box;
  grid-column-gap: 4px;
  flex: none;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  height: var(--option-field-height) !important;
  min-height: 0 !important;
  margin: 0;
  border-radius: var(--option-inner-radius);
  padding: 0 12px !important;
  font-size: 15px;
  line-height: 20px;
  cursor: text;
}

.option-option.booth .product-input.option:focus-within {
  outline-color: var(--selected-glass);
}

.option-option.booth .product-input.option input.option-price-input {
  text-align: right;
  flex: 1;
  width: auto;
  min-width: 0;
}

.option-option.booth .option-unit {
  color: #ffffffa6;
  flex: none;
  font-size: 13px;
  font-weight: 400;
}

/* The add row stays soft until it is used */
.option-option.booth.new-option .option-prices {
  opacity: .6;
  transition: opacity .2s;
}

.option-option.booth.new-option:focus-within .option-prices,
.option-option.booth.new-option:hover .option-prices {
  opacity: 1;
}

@media (hover: hover) {
  .option-option.booth:not(.new-option):hover {
    background-color: #ffffff0d;
  }
}

/* A wide list puts each option on one line: name, then the fields under their column titles.
   It waits until the name keeps about half the row, since product and part names run long */
@container options (min-width: 520px) {
  .option-columns,
  .option-option.booth {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .option-columns .option-info {
    display: flex;
  }
}

/* Phones and tablets get taller fields for touch */
@media screen and (max-width: 991px) {
  .variant-field:not(.new-variant-field) {
    --option-field-height: 40px;
    --option-default-size: 32px;
    --option-box-radius: var(--mobile-control-radius);
  }

  /* The pills sit away from the box's corners, so they stay fully round and the Required circle shares their corner's center */
  .variant-field .product-input.option.variant-setting {
    border-radius: calc(var(--option-field-height) / 2);
  }

  /* The first variant sits one panel inset below the panel's top, as it does from the sides, so its corners follow the panel's */
  .product-fields > .variant-field:not(.new-variant-field):first-child .product-input.variant {
    margin-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .option-name input.option-name-input,
  .option-option.booth.new-option .option-prices {
    transition: none;
  }
}

/* Category picker (product and create pages): the current category on top, the sliding columns under it to pick a new one.
   The box keeps the options' corner radius (30px, 24px on phones) and clips the rows to its corners.
   It has one set height whatever is picked: the header keeps its lines, and the columns fill the rest and scroll */
.category-picker-field {
  --category-box-radius: 30px;
  --category-box-height: 360px;
  --category-text-inset: 16px;
}

.product-input.category.category-picker {
  box-sizing: border-box;
  border-radius: var(--category-box-radius);
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  height: var(--category-box-height) !important;
  min-height: var(--category-box-height) !important;
  max-height: var(--category-box-height);
  margin-bottom: 0;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

.category-picker-label {
  color: #ffffffa6;
  font-size: 11px;
  line-height: 14px;
}

/* Current category: the path in small text, the category itself under it */
.category-picker-current {
  grid-row-gap: 2px;
  border-bottom: 1px solid var(--border);
  color: #fff;
  flex-flow: column;
  flex: none;
  padding: 14px var(--category-text-inset);
  display: flex;
}

/* The path keeps one line and the name two, so the header never changes size (the full text is in their tooltips) */
.category-picker-path {
  color: #ffffffbf;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 16px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
}

.category-picker-path[hidden] {
  visibility: hidden;
  display: block;
}

.category-picker-name {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  height: 44px;
  font-size: 16px;
  line-height: 22px;
  display: -webkit-box;
  overflow: hidden;
}

.category-picker-name.is-empty {
  color: #ffffff80;
}

/* Back sits under the header, in line with the rows' text. When it shows, the columns give up its room, not the box */
.category-picker .category-hierarchy-back-button {
  border-bottom: 1px solid var(--border);
  flex: none;
  padding: 12px 15px;
}

/* The columns take whatever height is left in the box and scroll inside it */
.category-picker .category-hierarchy-columns {
  flex: 1 1 auto;
  min-height: 0;
}

.category-picker-field .category-picker .category-hierarchy-column {
  max-height: none;
}

/* The sliding columns, as they were on the product page (moved here from its page styles so the create page has them too) */
.category-hierarchy-columns {
  display: flex;
  width: 100%;
  position: relative;
  overflow: hidden;
  align-items: stretch;
}

.category-hierarchy-column {
  min-width: 0;
  overflow: hidden;
  transition: width .3s ease, opacity .3s ease, transform .3s ease;
}

/* Sections fill the whole field until a section is picked */
.category-hierarchy-left {
  width: 100%;
}

.category-hierarchy-right {
  width: 0;
  opacity: 0;
  transform: translateX(30px);
}

/* With another level open, each column takes half */
.category-hierarchy-columns.has-right-column .category-hierarchy-left,
.category-hierarchy-columns.has-right-column .category-hierarchy-right {
  width: 50%;
}

.category-hierarchy-columns.has-right-column .category-hierarchy-right {
  opacity: 1;
  transform: translateX(0);
  border-left: 1px solid rgba(255, 255, 255, .15);
}

.category-hierarchy-options {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.category-hierarchy .category-option {
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease, transform .2s ease;
}

.category-hierarchy .category-option > div {
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-hierarchy .category-option.selected {
  position: relative;
}

.category-hierarchy-back {
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 10px;
  opacity: .65;
  transition: opacity .2s ease, background-color .2s ease;
}

.category-hierarchy-back:hover {
  opacity: 1;
}

/* Phones and tablets: the mobile box radius */
@media screen and (max-width: 991px) {
  .category-picker-field {
    --category-box-radius: var(--mobile-control-radius);
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-hierarchy-column,
  .category-hierarchy .category-option,
  .category-hierarchy-back {
    transition: none;
  }
}

/* Top bar location pill in a narrow window: same as the phone top bar's, the street wrapping to two lines inside the pill,
   and on phones as small as the phone top bar's */
@media screen and (max-width: 991px) {
  .mobile-management .section > .nav-bar-container .filter-pill .dropdown-toggle.filter {
    justify-content: flex-start;
    padding: 0 10px;
    font-size: 14px;
    overflow: hidden;
  }

  .mobile-management .section > .nav-bar-container .filter-pill .dropdown-toggle.filter > div {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left;
    white-space: normal;
    line-height: 1.15;
    display: -webkit-box;
    overflow: hidden;
  }
}

@media screen and (max-width: 479px) {
  .mobile-management .section > .nav-bar-container .filter-pill .dropdown-toggle.filter {
    font-size: .7em;
  }
}

/* Phone top bar search (Products, Orders): the field sits between the location pill and the search button instead of
   under both with percentage padding, so typed text never runs into either on any phone width or orientation */
.nav-bar-container.mobile-header .heading-search-bar > .filter-pill ~ .search-input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 15px;
  position: static;
}

/* Product page pricing (KOFIA): once a product has options, its price, stock, discount, tax exempt and shipping weight move off the
   product onto them. With one variant each option row holds them (Default, Weight, Stock, Discount, Tax Exempt, Price), the stock being a
   quantity or an out of stock switch as the business tracks it (with-stock, a switch centers in its column). With two or more variants
   the option rows only name the options, and the Inventory on the left (in the price's place) lists every combination with the same
   fields plus a compared price. An empty price follows the product price plus its options, an empty discount the product's discount.
   The variant list and the price section are swapped whole by entree.js, so their wrappers stay out of the layout */
.entree-variants,
.entree-pricing {
  display: contents;
}

.option-columns.with-weight.with-stock,
.option-option.booth.with-weight.with-stock {
  --option-columns: var(--option-default-column) 84px 72px 132px 72px 96px;
}

/* Section titles on both sides, like the fields' titles: Variants over the variants, Inventory with its count */
.product-field.variants-heading {
  justify-content: space-between;
  align-items: baseline;
  display: flex;
}

.variants-heading .option-inventories-count {
  color: #ffffffa6;
  font-size: 12px;
  line-height: 30px;
}

/* KOFIA with one variant: the option list is a table, every row on one line (name, then its six fields under their titles), and the
   list scrolls sideways when it is narrower than that, and down past its height like before. The name column is at least 180px and
   takes the room left over, the name boxes are kept out of the width count (contain) so every row and the titles share the same width */
.variant-field .product-input.options.option-table {
  overflow: auto;
}

.option-table .option-rows {
  flex: none;
  width: max-content;
  min-width: 100%;
  overflow: visible;
}

.option-table .option-columns,
.option-table .option-option.booth {
  grid-template-columns: minmax(180px, 1fr) auto;
  width: max-content;
  min-width: 100%;
}

.option-table .option-columns .option-info {
  display: flex;
}

.option-table .option-info {
  contain: inline-size;
}

/* The titles stay on top while the options scroll under them */
.option-table .option-columns {
  z-index: 1;
  background-color: var(--bg-glass-dark);
  position: sticky;
  top: 0;
}

/* The discount is a dropdown filling its field, stripped of its own look so it reads like the other fields. The phone rules size every
   select in a .product-input with !important, so this one resets them with !important too */
.option-option.booth .product-input.option.option-discount {
  cursor: pointer;
  height: var(--option-field-height) !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.option-option.booth select.option-discount-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: inherit;
  outline: none;
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  font: inherit;
  font-size: 13px !important;
  line-height: normal !important;
  overflow: hidden;
}

.option-option.booth select.option-discount-input option {
  color: #000;
}

/* The inventory is one list box that grows with its combinations and scrolls sideways when a combination's name is long.
   It is one grid, so the name column is as wide as the longest name and every row's fields stay under their titles (each row
   takes the grid's columns). It rounds on every corner, having no header box above it */
.variant-field.option-inventories .product-input.options.inventory {
  border-radius: var(--option-box-radius);
  min-height: 0;
  max-height: none;
  margin-top: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

.option-inventories .inventory-table {
  grid-column-gap: var(--option-gap);
  grid-template-columns: minmax(max-content, 1fr) var(--option-default-column) 84px 72px 132px 72px 96px 96px;
  width: max-content;
  min-width: 100%;
  display: grid;
}

.option-inventories .option-columns.inventory,
.option-inventories .option-option.booth.inventory {
  grid-column-gap: var(--option-gap);
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.option-inventories .inventory .option-prices {
  grid-column-gap: var(--option-gap);
  grid-column: 2 / -1;
  grid-template-columns: subgrid;
}

/* The column titles sit on a darker band over the rows, and name the combinations column too */
.option-inventories .option-columns.inventory {
  background-color: var(--bg-glass-dark);
}

.option-inventories .option-columns.inventory .option-info {
  display: flex;
}

.option-inventories .option-columns.inventory + .option-option.booth {
  border-top-style: none;
}

/* The combination name keeps its whole text on one line, the list scrolls sideways to show it */
.option-option.booth.inventory .option-name {
  white-space: nowrap;
}

.option-option.booth.inventory input::placeholder {
  color: #ffffff66;
}

/* Mouse and trackpad screens get a scrollbar that always shows under the lists that scroll sideways, set in from the rounded corners.
   Every scrollbar is hidden app wide (application.css), so these two lists turn theirs back on. Touch screens (phones, iPads) swipe them
   and stay without one. Chrome only draws the styled scrollbar while scrollbar-width is auto, so Firefox gets its own below */
@media (hover: hover) and (pointer: fine) {
  .product-input.options.inventory,
  .product-input.options.option-table {
    scrollbar-width: auto;
  }

  .product-input.options.inventory::-webkit-scrollbar,
  .product-input.options.option-table::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    display: block;
  }

  .product-input.options.inventory::-webkit-scrollbar-track,
  .product-input.options.option-table::-webkit-scrollbar-track {
    background-color: transparent;
    margin: 0 var(--option-box-radius);
  }

  .product-input.options.inventory::-webkit-scrollbar-thumb,
  .product-input.options.option-table::-webkit-scrollbar-thumb {
    background-color: var(--selected-glass);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 5px;
  }

  .product-input.options.inventory::-webkit-scrollbar-thumb:hover,
  .product-input.options.option-table::-webkit-scrollbar-thumb:hover {
    background-color: #ffffffa6;
  }

  .product-input.options.inventory::-webkit-scrollbar-corner,
  .product-input.options.option-table::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}

@supports (-moz-appearance: none) {
  @media (hover: hover) and (pointer: fine) {
    .product-input.options.inventory,
    .product-input.options.option-table {
      scrollbar-width: thin;
      scrollbar-color: var(--selected-glass) transparent;
    }
  }
}

/* The note that takes the place of the price and stock fields on the left */
.product-field.priced-on-options .setup-hint {
  text-align: left;
  padding-bottom: 6px;
}

/* Download loading (Export Images, Generate Seeds, Export Order Report): the loading animation with a progress bar and its step under it.
   It stacks the three in a column and keeps the bar as wide as the animation */
.loading-animation.download-loading {
  grid-row-gap: 18px;
  flex-direction: column;
}

.download-progress {
  box-sizing: border-box;
  background-color: var(--input-field);
  box-shadow: inset 0 0 10px 2px var(--inner-shadow);
  outline: .5px solid var(--border);
  border-radius: 6px;
  width: min(420px, 70vw);
  height: 12px;
  overflow: hidden;
}

.download-progress-bar {
  background-color: var(--selected-glass);
  box-shadow: inset 0 0 10px 1px var(--selected-inner-shadow);
  border-radius: inherit;
  width: 0%;
  height: 100%;
  transition: width .2s linear;
}

.download-progress-label {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .download-progress-bar {
    transition: none;
  }
}