.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);
  top: 164px;
}

.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: 18px;
  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;
}

/* 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);
}

@media screen and (max-width: 479px) {
  /* Even 22px around the search pill so its corners follow the header's 45px corners (45 - 23) */
  .home-page-header .header-container {
    padding-left: 22px;
    padding-right: 22px;
    padding-bottom: 22px;
  }
}

/* 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 */
/* Always a centered column, so leaving focus only shrinks the height and the filters glide up into place */
#filtered-category-filters {
  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);
}

#filtered-category-filters.focus {
  min-height: 55vh;
  margin-bottom: 40px;
}

/* 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.focus {
    min-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;
  }
}