.categories-list.home-page.square-cards .categories-item {
  height: auto;
}

.product-title {
  color: var(--wall);
}

.product-price {
  color: var(--wall);
}

.field-label-3 {
  background-color: var(--wall);
}

.categories-list.home-page.square-cards .c-card-link {
  box-shadow: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  display: flex;
  overflow: visible;
}

.categories-list.home-page.square-cards .c-card-link:hover {
  box-shadow: none;
}

.categories-list.home-page.square-cards .c-card-content {
  aspect-ratio: 1;
  border: 2px solid var(--touch);
  background-color: #333;
  border-radius: 35px;
  width: 100%;
  height: auto;
  transition: all .35s;
  overflow: hidden;
}

.categories-list.home-page.square-cards .c-card-link:hover .c-card-content {
  box-shadow: 0 -1px 11px 7px var(--shadow);
}

.categories-list.home-page.square-cards .category-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .35s;
  display: block;
}

.categories-list.home-page.square-cards .c-card-link:hover .category-image {
  transform: scale(1.05);
}

.categories-list.home-page.square-cards .c-card-title {
  z-index: auto;
  position: static;
  inset: auto;
}

.categories-list.home-page.square-cards ._w-card-title {
  justify-content: center;
  padding: 0;
}

.categories-list.home-page.square-cards .card-name {
  color: var(--touch);
  margin-bottom: 0;
  font-size: 1.8em;
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .categories-list.home-page.square-cards {
    grid-row-gap: 40px;
  }

  .categories-list.home-page.square-cards .categories-item {
    width: 100%;
    max-width: 400px;
  }
}

@media screen and (max-width: 479px) {
  .categories-list.home-page.square-cards {
    grid-row-gap: 30px;
  }

  .categories-list.home-page.square-cards .categories-item {
    margin-bottom: 0;
    max-width: 325px;
  }

  .categories-list.home-page.square-cards .c-card-content {
    border-radius: 30px;
  }

  .categories-list.home-page.square-cards .card-name {
    font-size: 1.5em;
  }
}

.product-img.entree {
  background-color: #fff;
}

/* Selected options */
.page.entree:not(.non-restaurant-options) .credentials-input.options.selected,
.page.entree:not(.non-restaurant-options) .credentials-input.options.selected .text-block-10 {
  color: var(--wall);
}

/* Map and reviews */
.section-container.map .map-heading,
.section-container.map .map-text,
.section-container.map .btn-primary.small.map,
.section.testimonials .testimonials-header,
.section.testimonials .review-card,
.section.testimonials .heading-h4-size.heading-link,
.section.testimonials .review-answer {
  color: var(--wall);
}


#ecom-entree-list,
#filtered-entree-list {
  width: 100%;
}

.ecom-entree-loading {
  text-align: center;
  padding: 20px;
}
/* Header search */
.ecom-header-search .search-header {
  box-shadow: 0 2px 8px #00000024;
}

.home-page-header a.account-icon,
.home-page-header .cart-button {
  filter: drop-shadow(0 2px 3px #0000002e);
}

.ecom-header-search .position-relative {
  position: relative;
}

.ecom-header-search-icon {
  display: inline-block;
  width: 45px;
  height: 45px;
  vertical-align: middle;
}

.ecom-header-search-icon svg {
  fill: var(--touch);
  fill-rule: evenodd;
  clip-rule: evenodd;
  stroke-linejoin: round;
  stroke-miterlimit: 2;
}

.ecom-header-search.search-open {
  position: relative;
  z-index: 1000;
}

.ecom-header-search.search-open .search-header {
  border-color: var(--touch);
  border-bottom-color: transparent;
  border-radius: 23px 23px 0 0;
}

.ecom-search-results {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 1000;
  box-sizing: border-box;
  max-height: 400px;
  overflow-y: auto;
  background-color: var(--wall);
  border: 1px solid var(--touch);
  border-top: 0;
  border-radius: 0 0 23px 23px;
  box-shadow: 0 8px 25px -5px var(--shadow);
}

.ecom-search-result,
.ecom-search-message {
  display: block;
  padding: 12px 20px;
  color: var(--touch);
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
}

.ecom-search-result:hover,
.ecom-search-result.selected {
  background-color: var(--touch);
  color: var(--wall);
}

.ecom-search-message {
  opacity: .7;
}

.ecom-search-results[hidden] {
  display: none;
}
/* Cart options */
.checkout-form .cart-item-content {
  flex: 1;
  min-width: 0;
  max-width: none;
  overflow-wrap: anywhere;
}

.checkout-form .cart-item-price {
  flex: 0 0 auto;
  text-align: right;
}

.cart-item-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 16px;
}

.cart-item-options .order-option-group {
  margin-top: 0;
}

/* Order options */
.order-option-group {
  margin-top: 16px;
  overflow-wrap: anywhere;
}

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

.order-option-label {
  color: #555;
  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: #222;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

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

.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;
}

/* Category filters */
#filtered-category-filters {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0 10px 15px;
}

#filtered-category-filter-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 20px;
}

.category-filter {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  z-index: 2;
}
.category-filter.open { z-index: 60; }

.category-filter-label {
  color: var(--touch);
  margin: 0 0 10px 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: .5px;
  text-align: left;
}
.category-filter-control { position: relative; width: 100%; }

/* Filter controls */
.category-filter-trigger,
.category-filter-search {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 10px 44px 10px 20px;
  border: 2px solid var(--touch);
  border-radius: 25px;
  background-color: var(--wall);
  color: var(--touch);
  font-family: inherit;
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  box-shadow: 0 0 20px -5px var(--shadow);
  transition: box-shadow .3s, border-color .3s;
}
.category-filter-trigger { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-filter-trigger:hover { box-shadow: 0 0 15px -1px var(--shadow); }
.category-filter-search { display: none; outline: none; cursor: text; }
.category-filter-search::placeholder { color: var(--touch); opacity: .6; }
.category-filter.open .category-filter-trigger { display: none; }
.category-filter.open .category-filter-search { display: block; }

.category-filter-arrow {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--touch);
  border-bottom: 2px solid var(--touch);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: transform .2s;
}
.category-filter.open .category-filter-arrow { transform: translateY(-30%) rotate(-135deg); }

.category-filter-options {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 100;
  box-sizing: border-box;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
  background-color: var(--wall);
  border: 2px solid var(--touch);
  border-radius: 24px;
  box-shadow: 0 8px 25px -5px var(--shadow);
}
.category-filter.open .category-filter-options { display: flex; flex-direction: column; gap: 8px; }

.category-filter-option {
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--touch);
  font-size: 16px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}
.category-filter-option:hover { border-color: var(--touch); }
.category-filter-option.selected { background-color: var(--touch); color: var(--wall); font-weight: 700; }
.category-filter-no-results { padding: 10px 14px; color: var(--touch); opacity: .7; font-size: 15px; text-align: left; }

/* Clear filters */
.filtered-category-filter-footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 0;
}
.filtered-category-clear {
  display: none;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: var(--touch);
  font-family: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.filtered-category-clear.visible { display: inline-block; }

#filtered-no-results { display: none; }
#filtered-no-results.visible { display: flex; }

@media screen and (max-width: 991px) {
  #filtered-category-filter-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 479px) {
  #filtered-category-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Store map: inner radius = outer radius - the space between them, so nested corners stay concentric (paddings take off the 1px border) */
.store-map {
  --store-space: 12px;
  --store-pad: 18px;
  --store-pill: 22px;
  --store-card-radius: calc(var(--store-pill) + var(--store-pad));
  --store-frame-radius: calc(var(--store-card-radius) + var(--store-space));
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: var(--store-space);
  box-sizing: border-box;
  width: calc(100% - 60px);
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--store-space) - 1px);
  border: 1px solid color-mix(in srgb, var(--touch) 22%, transparent);
  border-radius: var(--store-frame-radius);
  background-color: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.section-container.map {
  margin-top: 20px;
  margin-bottom: 50px;
  padding-top: 0;
}

.store-map-frame {
  position: relative;
  min-height: 480px;
  border-radius: var(--store-card-radius);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--touch) 10%, var(--wall));
}

.store-map-frame iframe, .store-map-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.store-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
  padding: calc(var(--store-pad) - 1px);
  border: 1px solid color-mix(in srgb, var(--touch) 15%, transparent);
  border-radius: var(--store-card-radius);
  background-color: color-mix(in srgb, var(--wall) 65%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--touch);
}

.store-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 6px 0;
}

.store-card-heading {
  margin: 0;
  color: var(--touch);
  font-size: 30px;
  line-height: 34px;
}

.store-card-address {
  opacity: .75;
  font-size: 15px;
  line-height: 22px;
}

.store-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 14px 7px 10px;
  border: 1px solid color-mix(in srgb, var(--touch) 20%, transparent);
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--touch) 8%, transparent);
  font-size: 13px;
  line-height: 16px;
}

.store-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e5484d;
}

.store-status.open .store-status-dot {
  background-color: #30a46c;
  box-shadow: 0 0 0 0 #30a46c99;
  animation: store-pulse 2s infinite;
}

@keyframes store-pulse {
  70% { box-shadow: 0 0 0 8px #30a46c00; }
  100% { box-shadow: 0 0 0 0 #30a46c00; }
}

.store-week {
  --store-bar-radius: 13px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: calc(var(--store-pill) - var(--store-bar-radius) - 1px) calc(var(--store-pill) - var(--store-bar-radius) - 1px) 14px;
  border: 1px solid color-mix(in srgb, var(--touch) 12%, transparent);
  border-radius: var(--store-pill);
  background-color: color-mix(in srgb, var(--touch) 6%, transparent);
}

.store-week-bars {
  display: flex;
  justify-content: space-between;
}

.store-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: calc(var(--store-bar-radius) * 2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--touch);
  font-family: inherit;
  cursor: pointer;
}

.store-day-bar {
  position: relative;
  width: 100%;
  height: 96px;
  border-radius: var(--store-bar-radius);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--touch) 10%, transparent);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(25% - 1px), color-mix(in srgb, var(--touch) 14%, transparent) calc(25% - 1px) 25%);
  transition: box-shadow .25s, transform .25s;
}

.store-day-fill {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 9px;
  background-color: color-mix(in srgb, var(--touch) 55%, transparent);
  transition: background-color .25s;
}

.store-day.today .store-day-fill, .store-day.selected .store-day-fill {
  background-color: var(--touch);
}

.store-day-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  margin-top: -1px;
  background-color: var(--wall);
  box-shadow: 0 0 0 1px var(--touch);
}

.store-day.off .store-day-bar {
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--touch) 14%, transparent) 5px 6px);
}

.store-day-label {
  opacity: .6;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.store-day.today .store-day-label, .store-day.selected .store-day-label {
  opacity: 1;
  font-weight: 700;
}

.store-day.selected .store-day-bar {
  box-shadow: 0 0 0 2px var(--touch), 0 6px 18px -6px var(--shadow);
  transform: translateY(-2px);
}

.store-day:focus-visible {
  outline: none;
}

.store-day:focus-visible .store-day-bar {
  box-shadow: 0 0 0 2px var(--wall), 0 0 0 4px var(--touch);
}

.store-day-details {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 12px 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--touch) 12%, transparent);
}

.store-day-name {
  opacity: .7;
  font-size: 14px;
}

.store-day-time {
  font-size: 20px;
  font-weight: 700;
  text-align: right;
}

.store-card-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.store-btn {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: calc(var(--store-pill) * 2);
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--touch) 35%, transparent);
  border-radius: var(--store-pill);
  color: var(--touch);
  font-size: 16px;
  text-decoration: none;
  transition: transform .25s, background-color .25s;
}

.store-btn.primary {
  flex: 2;
  border-color: var(--touch);
  background-color: var(--touch);
  color: var(--wall);
}

.store-btn:hover {
  transform: scale(1.03);
  color: var(--touch);
  background-color: color-mix(in srgb, var(--touch) 10%, transparent);
}

.store-btn.primary:hover {
  color: var(--wall);
  background-color: var(--touch);
}

@media screen and (max-width: 991px) {
  .section-container.map {
    margin-top: 50px;
  }

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

  .store-map-frame {
    min-height: 320px;
  }
}

@media screen and (max-width: 479px) {
  .section-container.map {
    margin-top: 35px;
    margin-bottom: 35px;
  }

  .store-map {
    --store-space: 10px;
    --store-pad: 14px;
    --store-pill: 22px;
    width: calc(100% - 30px);
  }

  .store-map-frame {
    min-height: 260px;
  }

  .store-card-heading {
    font-size: 26px;
    line-height: 30px;
  }

  .store-day-bar {
    height: 84px;
  }

  .store-day-label {
    font-size: 11px;
  }
}

/* Nav sign in and cart icons: the white svg is used as a mask so the icon takes the layered color */
img.account-icon, img.cart-button-image {
  background-color: var(--touch);
  -webkit-mask: url("/assets/eCom/NavBar/Account-Icon-c65f0691.svg") center / contain no-repeat;
  mask: url("/assets/eCom/NavBar/Account-Icon-c65f0691.svg") center / contain no-repeat;
  object-position: -9999px 0;
}

img.cart-button-image {
  -webkit-mask-image: url("/assets/eCom/NavBar/Cart-Icon-13ceb7a5.svg");
  mask-image: url("/assets/eCom/NavBar/Cart-Icon-13ceb7a5.svg");
}

/* Cart count bubble: flipped colors with a background colored ring so it stands out on the icon */
.cart-quantity-2 {
  background-color: var(--touch);
  color: var(--wall);
  box-shadow: 0 0 0 2px var(--wall);
  font-weight: 700;
  z-index: 2;
}

/* Added to order: the count rolls inside the bubble, so it clips; the bubble glows in the layered color and bounces once, the cart icon pops softly with it */
.cart-quantity-2 {
  overflow: hidden;
}

.cart-count-number {
  display: inline-block;
}

.cart-quantity-2.cart-bump {
  animation: cart-bump .7s cubic-bezier(.2, .8, .2, 1);
}

.cart-button.cart-bump {
  animation: cart-pop .7s cubic-bezier(.2, .8, .2, 1);
}

@keyframes cart-bump {
  0% { transform: scale(1); box-shadow: 0 0 0 2px var(--wall); }
  30% { transform: scale(1.35); box-shadow: 0 0 0 2px var(--wall), 0 0 16px 5px color-mix(in srgb, var(--touch) 75%, transparent); }
  55% { transform: scale(.92); }
  75% { transform: scale(1.06); box-shadow: 0 0 0 2px var(--wall), 0 0 10px 2px color-mix(in srgb, var(--touch) 45%, transparent); }
  100% { transform: scale(1); box-shadow: 0 0 0 2px var(--wall); }
}

@keyframes cart-pop {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.08); }
  60% { transform: scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .cart-quantity-2.cart-bump, .cart-button.cart-bump {
    animation: none;
  }
}

/* Added to cart: a glass card grows out of the cart icon, its point aimed at the icon, and shrinks back into it.
   Nested corners: the photo's radius is the card's radius minus the card's padding */
.added-to-cart {
  --added-point: 24px;
  --added-pad: 10px;
  --added-radius: 24px;
  z-index: 1001;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(360px, calc(100vw - 24px));
  padding: var(--added-pad);
  border: 1px solid color-mix(in srgb, var(--touch) 28%, transparent);
  border-radius: var(--added-radius);
  background-color: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: 0 18px 40px -16px var(--shadow);
  color: var(--touch);
  opacity: 0;
  transform: scale(.15);
  transform-origin: calc(100% - var(--added-point)) -8px;
  transition: transform .45s cubic-bezier(.2, .9, .25, 1.12), opacity .25s ease;
  pointer-events: none;
  position: fixed;
}

.added-to-cart.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* The point under the cart icon */
.added-to-cart::before {
  content: "";
  width: 12px;
  height: 12px;
  border-top: 1px solid color-mix(in srgb, var(--touch) 28%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--touch) 28%, transparent);
  border-top-left-radius: 3px;
  background-color: inherit;
  transform: rotate(45deg);
  position: absolute;
  top: -7px;
  right: calc(var(--added-point) - 6px);
}

.added-to-cart-image {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: calc(var(--added-radius) - var(--added-pad));
  background-color: #fff;
  object-fit: cover;
}

.added-to-cart-copy {
  flex: 1;
  min-width: 0;
}

.added-to-cart-label {
  font-size: 12px;
  line-height: 16px;
  opacity: .75;
}

.added-to-cart-label::before {
  content: "\2713  ";
}

.added-to-cart-name {
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.added-to-cart-link {
  flex: none;
  padding: 9px 14px;
  border-radius: 999px;
  background-color: var(--touch);
  color: var(--wall);
  font-size: 13px;
  line-height: 16px;
  text-decoration: none;
  transition: transform .25s;
}

.added-to-cart-link:hover {
  transform: scale(1.04);
}

.added-to-cart-close {
  flex: none;
  width: 24px;
  height: 24px;
  margin-left: -4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--touch);
  font-family: inherit;
  font-size: 18px;
  line-height: 24px;
  opacity: .6;
  cursor: pointer;
}

.added-to-cart-close:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .added-to-cart {
    transform: none;
    transition: opacity .2s ease;
  }
}

/* Store map with an animation: the video fills the whole map section and the store card sits on top as glass */
.store-map.animated {
  position: relative;
  min-height: 520px;
  overflow: hidden;
}

.store-map.animated .store-map-frame {
  position: absolute;
  inset: 0;
  min-height: 0;
  border-radius: 0;
}

/* 140% wide and pinned right, so the middle of the video (the location pin) lands in the middle of the open left side */
.store-map.animated .store-map-frame video {
  left: auto;
  right: 0;
  width: 140%;
}

.store-map.animated .store-card {
  position: relative;
  grid-column: 2;
  background-color: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
}

@media screen and (max-width: 991px) {
  .store-map.animated {
    --store-video-space: 300px;
    min-height: 0;
    padding-top: var(--store-video-space);
  }

  /* Taller than the section and pinned to the bottom, so the middle of the video lands in the open space above the card */
  .store-map.animated .store-map-frame video {
    top: auto;
    bottom: 0;
    width: 100%;
    height: calc(200% - var(--store-video-space));
  }

  .store-map.animated .store-card {
    grid-column: 1;
  }
}

@media screen and (max-width: 479px) {
  .store-map.animated {
    --store-video-space: 240px;
  }
}

/* Mobile menu button matches the sign in and cart icons */
.hamburger-menu-bar, .hamburger-menu-bar.top, .hamburger-menu-bar.bottom {
  background-color: var(--touch);
}

/* Home page without the hero slider: the header stays fixed at the top and the page starts below it.
   The landing page script measures the header, the fallback is its phone height */
.page.landing.no-hero {
  padding-top: var(--landing-header-space, 133px);
}

/* Phones leave the fixed header at top: auto, which would follow the padding down, so it is pinned to the top */
.page.landing.no-hero .home-page-header {
  top: 0;
}

/* Header logo: always the same height whatever logo is uploaded, its width follows the logo up to the max width,
   and it is centered on the row instead of pushed down with padding */
.header-logo-link {
  align-items: center;
  display: flex;
}

.header-logo {
  object-fit: contain;
  object-position: left center;
  width: auto;
  height: 36px;
}

@media screen and (max-width: 991px) {
  .header-logo {
    height: 32px;
  }
}

@media screen and (max-width: 479px) {
  /* The header nests in the page's 60px corner: its radius is that corner less its margin, and everything inside sits the same room
     from its edge on every side, that room being the header radius less the controls' radius, so every corner shares one center
     (60px - 15px margin = 45px header, 45px - 24px control radius = 21px room) */
  .home-page-header {
    --header-corner: 60px;
    --header-inset: 15px;
    --header-control: 48px;
    --header-radius: calc(var(--header-corner) - var(--header-inset));
    --header-space: calc(var(--header-radius) - var(--header-control) / 2);
    margin: var(--header-inset) var(--header-inset) 0;
    border-radius: var(--header-radius);
  }

  .home-page-header.sub {
    top: var(--header-inset);
  }

  .home-page-header .header-container {
    margin-top: 0;
    padding: 0 var(--header-space) var(--header-space);
  }

  /* The top row is one control tall, so the logo and icons center on the top corners' center like the search pill does on the bottom ones */
  .home-page-header .header-content-wrapper {
    grid-column-gap: 8px;
    height: calc(var(--header-space) + var(--header-control));
    min-height: 0;
    margin-top: 0;
    padding: var(--header-space) 0 0;
    overflow: visible;
  }

  .home-page-header form.header {
    margin-top: 8px;
  }

  .home-page-header .search-header {
    height: var(--header-control);
    border-radius: calc(var(--header-control) / 2);
  }

  /* The logo gets all the room the icons leave. It keeps one height whatever logo is uploaded, only its width follows the logo */
  .home-page-header .header-logo-link {
    flex: 1 1 auto;
    min-width: 0;
  }

  .header-logo {
    max-width: 100%;
    height: 30px;
  }

  .home-page-header .header-right-side {
    flex: none;
    grid-column-gap: 8px;
    padding: 0;
  }

  .home-page-header .account-icon,
  .home-page-header .cart-button-wrapper {
    margin-left: 0;
  }

  .home-page-header .hamburger-menu-wrapper {
    padding-left: 0;
  }
}

/* Reviews: same glass frame as the store map, inner radius = outer radius - the space between them (paddings take off the 1px border) */
.section-container.reviews {
  margin-top: 0;
  margin-bottom: 50px;
  padding-top: 0;
}

.review-frame {
  --review-space: 12px;
  --review-pad: 18px;
  --review-pill: 22px;
  --review-card-radius: calc(var(--review-pill) + var(--review-pad));
  --review-frame-radius: calc(var(--review-card-radius) + var(--review-space));
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  box-sizing: border-box;
  width: calc(100% - 60px);
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--review-space) - 1px);
  border: 1px solid color-mix(in srgb, var(--touch) 22%, transparent);
  border-radius: var(--review-frame-radius);
  background-color: var(--glass);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--touch);
  overflow: hidden;
}

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

.review-summary, .review-item {
  box-sizing: border-box;
  padding: calc(var(--review-pad) - 1px);
  border: 1px solid color-mix(in srgb, var(--touch) 15%, transparent);
  border-radius: var(--review-card-radius);
  background-color: color-mix(in srgb, var(--wall) 65%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.review-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.review-frame.empty .review-summary {
  align-items: center;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.review-eyebrow {
  padding: 6px 6px 0;
  opacity: .65;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.review-heading {
  margin: 0;
  padding: 0 6px;
  color: var(--touch);
  font-size: 32px;
  line-height: 36px;
}

.review-empty-text {
  max-width: 420px;
  opacity: .75;
  font-size: 15px;
  line-height: 22px;
}

.review-score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 6px;
}

.review-score-number {
  font-size: 56px;
  font-weight: 700;
  line-height: 56px;
}

.review-stars {
  display: flex;
  gap: 2px;
  font-size: 18px;
  line-height: 18px;
}

.review-star {
  color: color-mix(in srgb, var(--touch) 25%, transparent);
}

.review-star.on {
  color: var(--touch);
}

.review-count {
  margin-top: 6px;
  opacity: .7;
  font-size: 13px;
}

.review-nav {
  display: flex;
  gap: 10px;
  margin-top: auto;
}

.review-nav-btn {
  flex: 1;
  height: calc(var(--review-pill) * 2);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--touch) 35%, transparent);
  border-radius: var(--review-pill);
  background: none;
  color: var(--touch);
  font-family: inherit;
  font-size: 20px;
  cursor: pointer;
  transition: transform .25s, background-color .25s;
}

.review-nav-btn:hover {
  transform: scale(1.03);
  background-color: color-mix(in srgb, var(--touch) 10%, transparent);
}

/* The track runs to the frame's edge with padding equal to the fade, so cards only fade while they scroll under an edge */
.review-track {
  display: flex;
  column-gap: var(--review-space);
  margin-right: calc(var(--review-space) * -1);
  padding: 0 var(--review-space);
  scroll-padding: 0 var(--review-space);
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--review-space), #000 calc(100% - var(--review-space)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--review-space), #000 calc(100% - var(--review-space)), transparent);
}

.review-track::-webkit-scrollbar {
  display: none;
}

.review-item {
  display: flex;
  flex: 0 0 320px;
  flex-direction: column;
  gap: 14px;
  scroll-snap-align: start;
  color: var(--touch);
}

.review-item .review-stars {
  padding: 6px 6px 0;
}

.review-quote {
  display: -webkit-box;
  flex: 1;
  margin: 0;
  padding: 0 6px;
  overflow: hidden;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 24px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Avatar radius = card radius - card padding, so it nests in the card's bottom corner */
.review-avatar {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: calc(var(--review-pill) * 2);
  height: calc(var(--review-pill) * 2);
  border-radius: var(--review-pill);
  background-color: var(--touch);
  color: var(--wall);
  font-size: 18px;
  font-weight: 700;
}

.review-name {
  font-size: 16px;
  font-weight: 700;
}

.review-date {
  opacity: .6;
  font-size: 13px;
}

@media screen and (max-width: 991px) {
  .review-frame {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--review-space);
  }

  .review-track {
    margin-left: calc(var(--review-space) * -1);
  }

  .review-item {
    flex-basis: min(320px, 82%);
  }
}

@media screen and (max-width: 767px) {
  /* One review at a time: each card is as wide as the frame minus its padding */
  .review-item {
    flex-basis: 100%;
  }
}

@media screen and (max-width: 479px) {
  .section-container.reviews {
    margin-bottom: 35px;
  }

  .review-frame {
    --review-space: 10px;
    --review-pad: 14px;
    width: calc(100% - 30px);
  }

  .review-heading {
    font-size: 26px;
    line-height: 30px;
  }

  .review-score-number {
    font-size: 44px;
    line-height: 44px;
  }
}

/* Hero slider bottom: progressive blur (each layer blurs more and shows lower) with an eased fade into the wall color.
   The last 12% is solid wall so the blur's hard bottom edge never shows */
.overlay-cta {
  background-image: none;
}

/* Webflow's grey slider background can show as a hairline under the video */
.hero-slider .slider {
  background-color: var(--wall);
}

.hero-fade {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 30%;
  pointer-events: none;
}

/* The color fade sits above the blur layers so its solid bottom also covers the blur's edge */
.hero-fade::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom,
    color-mix(in srgb, var(--wall) 0%, transparent) 0.0%,
    color-mix(in srgb, var(--wall) 1.3%, transparent) 8.8%,
    color-mix(in srgb, var(--wall) 4.9%, transparent) 17.6%,
    color-mix(in srgb, var(--wall) 10.4%, transparent) 26.4%,
    color-mix(in srgb, var(--wall) 17.6%, transparent) 35.2%,
    color-mix(in srgb, var(--wall) 25.9%, transparent) 44.0%,
    color-mix(in srgb, var(--wall) 35.2%, transparent) 51.0%,
    color-mix(in srgb, var(--wall) 45%, transparent) 57.2%,
    color-mix(in srgb, var(--wall) 55%, transparent) 63.4%,
    color-mix(in srgb, var(--wall) 64.8%, transparent) 68.6%,
    color-mix(in srgb, var(--wall) 74.1%, transparent) 73.9%,
    color-mix(in srgb, var(--wall) 82.4%, transparent) 78.3%,
    color-mix(in srgb, var(--wall) 89.6%, transparent) 81.8%,
    color-mix(in srgb, var(--wall) 95.1%, transparent) 84.5%,
    color-mix(in srgb, var(--wall) 98.7%, transparent) 86.7%,
    var(--wall) 88%,
    var(--wall) 100%);
}

.hero-fade span {
  position: absolute;
  inset: 0;
}

.hero-fade span:nth-child(1) {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 45%, transparent 65%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 45%, transparent 65%);
}

.hero-fade span:nth-child(2) {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 45%, #000 65%, transparent 85%);
  mask-image: linear-gradient(to bottom, transparent 20%, #000 45%, #000 65%, transparent 85%);
}

.hero-fade span:nth-child(3) {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 45%, #000 65%, #000 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 45%, #000 65%, #000 85%, transparent 100%);
}

.hero-fade span:nth-child(4) {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 65%, #000 90%);
  mask-image: linear-gradient(to bottom, transparent 65%, #000 90%);
}

.hero-fade + .overlay-cta {
  z-index: 2;
}

/* Filter focus: while a filter is still waiting for a choice the filters keep their full width row but sit centered in the first screen.
   Once the last choice is made the class drops and they settle back above the items */
/* The focus height is registered so the page script can read it in pixels */
@property --filter-focus-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* Always a centered column, so leaving focus only shrinks the height and the filters glide up into place */
#filtered-category-filters {
  --filter-focus-height: 55vh;
  --filter-focus-space: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  transition: min-height .6s cubic-bezier(.2, .8, .2, 1), margin .6s cubic-bezier(.2, .8, .2, 1), padding .6s cubic-bezier(.2, .8, .2, 1);
}

/* The enlarged title takes its room out of this height, so the items below stay where they were.
   The top padding matches the space under the filters (clear link, margin, gap before the items), so they sit centered between the title and the items */
#filtered-category-filters.focus {
  min-height: calc(var(--filter-focus-height) - var(--filter-heading-room, 0px));
  margin-bottom: var(--filter-focus-space);
  padding-top: var(--filter-focus-offset, 0px);
}

/* While the filters wait, the category name grows into the empty space, always on one line, and shrinks back with them.
   The page script works the size out from the name's width and that space */
#filtered-category-heading {
  transition: font-size .6s cubic-bezier(.2, .8, .2, 1);
}

#filtered-category-heading.focus {
  font-size: var(--filter-heading-size, var(--collection-heading-size));
  white-space: nowrap;
}

/* The field waiting for a choice is lit from behind: a soft glow on every side with a brighter light travelling around it.
   The field's solid background hides the light everywhere except its edges */
@property --filter-light-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

#filtered-category-filters.focus .category-filter:last-child .category-filter-control {
  isolation: isolate;
}

#filtered-category-filters.focus .category-filter:last-child .category-filter-control::before,
#filtered-category-filters.focus .category-filter:last-child .category-filter-control::after {
  content: "";
  position: absolute;
  inset: -6px;
  z-index: -1;
  border-radius: 31px;
  pointer-events: none;
}

/* Base glow on all sides, starting right at the field edge so there is no unlit gap */
#filtered-category-filters.focus .category-filter:last-child .category-filter-control::before {
  inset: 0;
  border-radius: 25px;
  box-shadow: 0 0 28px 2px var(--shadow);
  opacity: .8;
}

/* Moving light: two highlights on opposite sides, rotating around the field */
#filtered-category-filters.focus .category-filter:last-child .category-filter-control::after {
  background-image: conic-gradient(from var(--filter-light-angle),
    transparent 0deg,
    color-mix(in srgb, var(--touch) 85%, transparent) 50deg,
    transparent 110deg,
    transparent 180deg,
    color-mix(in srgb, var(--touch) 55%, transparent) 230deg,
    transparent 290deg);
  filter: blur(14px);
  animation: filter-light 6s linear infinite;
}

@keyframes filter-light {
  to { --filter-light-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  #filtered-category-filters.focus .category-filter:last-child .category-filter-control::after {
    animation: none;
  }
}

@media screen and (max-width: 479px) {
  #filtered-category-filters {
    --filter-focus-height: 50vh;
  }
}

/* Smooth filter changes: removed filters fade out in place, the clear link fades, items and the empty message rise in */
#filtered-category-filter-grid {
  position: relative;
}

.category-filter.category-filter-leaving {
  position: absolute;
  margin: 0;
  pointer-events: none;
}

.filtered-category-clear {
  display: inline-block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease;
}

.filtered-category-clear.visible {
  opacity: 1;
  visibility: visible;
}

.filtered-entree-card, #filtered-no-results.visible {
  animation: filter-rise-in .45s cubic-bezier(.2, .8, .2, 1) backwards;
}

@keyframes filter-rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .filtered-entree-card, #filtered-no-results.visible {
    animation: none;
  }

  .filtered-category-clear {
    transition: none;
  }
}

/* Entree gallery: thumbnails fly into the main spot, and the main image zooms */
#entree-gallery .entree-gallery-main {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 25px;
  isolation: isolate;
  transform: translateZ(0);
  cursor: zoom-in;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

#entree-gallery .entree-gallery-main:hover {
  transform: translateZ(0);
}

#entree-gallery .entree-gallery-main.zoomed {
  cursor: zoom-out;
  touch-action: none;
}

#entree-gallery .entree-gallery-main img {
  display: block;
  object-fit: cover;
  transform-origin: 0 0;
  transition: transform .25s ease;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

#entree-gallery .entree-gallery-main img:hover {
  transform: none;
}

/* The hover zoom eases itself every frame in Options.js, so a CSS transition on top would restart on each mouse move and stutter */
#entree-gallery .entree-gallery-main.zoom-tracking img {
  transition: none;
}

#entree-gallery .entree-gallery-main.zoom-gesture img {
  transition: none;
}

#entree-gallery .entree-gallery-thumb {
  cursor: pointer;
}

#entree-gallery .entree-gallery-fly {
  position: absolute;
  z-index: 5;
  overflow: hidden;
  border-radius: 25px;
  pointer-events: none;
  box-shadow: 0 12px 30px -12px var(--shadow);
}

#entree-gallery .entree-gallery-fly img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* Relative here only anchors the flying thumbnails; top resets the desktop sticky offset, which would otherwise push the image down over the title */
@media screen and (max-width: 991px) {
  #entree-gallery {
    position: relative;
    top: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #entree-gallery .entree-gallery-main img {
    transition: none;
  }
}

/* Out of stock listings: the label takes the price's place, kept small and on one line so it fits where a short price sat */
.text-block-3.out-of-stock,
.product-price.out-of-stock {
  white-space: nowrap;
  opacity: .75;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Starting from: a small line above the price when options can raise it, so the price column stays as narrow as before */
.price-from {
  display: block;
  white-space: nowrap;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .7;
}

/* Check for availability: same size as Add to Order, the call and email pills open right under it */
.availability-button {
  width: 100%;
  font-family: inherit;
  cursor: pointer;
}

.availability-options {
  --store-pill: 22px;
  display: flex;
  gap: 10px;
  margin-top: 10px;
  animation: filter-rise-in .35s cubic-bezier(.2, .8, .2, 1);
}

.availability-options[hidden] {
  display: none;
}

.availability-options .store-btn {
  background-color: var(--wall);
}

.availability-options .store-btn.primary {
  background-color: var(--touch);
}

/* Checkout timeout: same card as the rewards card, between the payment form and the Pay button */
.checkout-timeout-card {
  margin: 20px 5px 0;
}

.checkout-timeout-card[hidden],
.checkout-timeout-card .sign-in-rewards-link[hidden] {
  display: none;
}

.checkout-pay-button:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Type sizes: THICCCBOI stays as the font; sizes step down evenly across breakpoints and big headings get line heights that match their size,
   so wrapped lines never collide and long product names stay readable on phones */
body {
  font-size: 16px;
  line-height: 1.5;
}

.slide-heading,
.section-heading,
.storeslogan,
.display-1,
.static-heading,
.collection-heading,
.heading-8 {
  line-height: 1.15;
}

.section-heading {
  font-size: 56px;
}

.storeslogan,
.static-heading {
  font-size: 44px;
}

/* Kept in a variable so the filters page can read the normal size while its title is enlarged */
.collection-heading {
  --collection-heading-size: 40px;
  font-size: var(--collection-heading-size);
}

.heading-8 {
  font-size: 30px;
}

.product-title-2 {
  font-size: 32px;
  line-height: 1.2;
}

.heading-5 {
  font-size: 17px;
  line-height: 1.35;
}

.product-title {
  font-size: 16px;
  line-height: 1.4;
}

.price-2 {
  font-size: 26px;
}

.text-block-3 {
  font-size: 16px;
}

.product-price {
  font-size: 15px;
}

.field-label-3 {
  font-size: 16px;
}

.product-description-2 p,
.product-description p {
  line-height: 1.6;
}

/* About and policy text is set as a heading in the views, so it is brought back to reading size here */
.static-paragraph {
  font-size: 18px;
  line-height: 1.7;
}

@media screen and (max-width: 991px) {
  .section-heading {
    font-size: 44px;
  }

  .storeslogan {
    font-size: 36px;
  }

  .static-heading {
    font-size: 40px;
  }

  .collection-heading {
    --collection-heading-size: 36px;
  }

  .product-title-2 {
    font-size: 30px;
  }

  .heading-8 {
    font-size: 28px;
  }
}

@media screen and (max-width: 767px) {
  .section-heading {
    font-size: 38px;
  }

  .storeslogan {
    font-size: 32px;
  }

  .static-heading {
    font-size: 36px;
  }

  .collection-heading {
    --collection-heading-size: 32px;
  }

  .product-title-2 {
    font-size: 28px;
  }

  .heading-8 {
    font-size: 26px;
  }
}

@media screen and (max-width: 479px) {
  .section-heading {
    font-size: 32px;
  }

  .storeslogan {
    font-size: 30px;
  }

  .static-heading {
    font-size: 30px;
  }

  .collection-heading {
    --collection-heading-size: 30px;
  }

  .product-title-2 {
    font-size: 24px;
  }

  .heading-8 {
    font-size: 24px;
  }

  .heading-5 {
    font-size: 16px;
  }

  .price-2 {
    font-size: 24px;
  }

  .static-paragraph {
    font-size: 17px;
  }
}

/* Filters page on phones: the title stays big at the top with a set gap to the filters, and the items follow right under them
   instead of waiting below an empty stage. It steps down a little as each filter appears and is always on one line, even after
   the last choice (the page script sets the size, the gap under the letters and the fit) */
@media screen and (max-width: 479px) {
  #filtered-category-heading {
    --filter-heading-max: 120px;
    --filter-heading-gap: 24px;
    font-size: min(var(--collection-heading-size), var(--filter-heading-fit, var(--collection-heading-size)));
    white-space: nowrap;
    transition: font-size .6s cubic-bezier(.2, .8, .2, 1), margin .6s cubic-bezier(.2, .8, .2, 1);
  }

  #filtered-category-heading.focus {
    margin-bottom: var(--filter-heading-space, 10px);
  }

  #filtered-category-filters {
    justify-content: flex-start;
  }

  #filtered-category-filters.focus {
    min-height: 0;
  }
}

/* KOFIA sold out options: dimmed and struck through, with "Sold out" where the price would be. One in no combination left can't be
   picked (sold-out). One only sold out with the other variants' picks stays pickable and moves those picks (sold-out-with-pick).
   With two or more variants Options.js marks them from the other picks, so the label is always there and only shows when sold out.
   The option chips' own styles (non_restaurant_options.css) load after this file, so the hover reset needs !important */
.credentials-input.options .option-sold-out {
  display: none;
}

.credentials-input.options.sold-out,
.credentials-input.options.sold-out-with-pick {
  opacity: .45;
}

.credentials-input.options.sold-out {
  cursor: not-allowed !important;
}

.credentials-input.options.sold-out:hover {
  box-shadow: none !important;
  transform: none !important;
}

.credentials-input.options.sold-out .text-block-10:first-of-type,
.credentials-input.options.sold-out-with-pick .text-block-10:first-of-type {
  text-decoration: line-through;
}

.credentials-input.options.sold-out .option-sold-out,
.credentials-input.options.sold-out-with-pick .option-sold-out {
  white-space: nowrap;
  flex: none;
  margin-left: 20px;
  font-size: 13px;
  font-weight: 500;
  display: block;
}