git s:root {
  --primary-color: #007bff;
  --primary-hover: #0056b3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --text-primary: #213547;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  --text-light: #ffffff;
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-card: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.5);
  --border-primary: #dee2e6;
  --border-secondary: #ced4da;
  --border-light: #f1f3f4;
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.2);
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --input-focus: #007bff;
  --input-text: #213547;
  --input-placeholder: #6c757d;
  --btn-primary-bg: #007bff;
  --btn-primary-hover: #0056b3;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-hover: #545b62;
  --btn-success-bg: #28a745;
  --btn-success-hover: #218838;
  --btn-danger-bg: #dc3545;
  --btn-danger-hover: #c82333;
  --btn-outline-border: #007bff;
  --btn-outline-text: #007bff;
  --btn-outline-hover-bg: #007bff;
  --btn-outline-hover-text: #ffffff;
  --card-bg: #ffffff;
  --card-border: #dee2e6;
  --card-shadow: var(--shadow-light);
  --modal-bg: #ffffff;
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --basket-bg: #ffffff;
  --basket-card-bg: #ffffff;
  --basket-border: #dee2e6;
  --basket-item-border: #f1f3f4;
  --basket-total-border: #dee2e6;
  --menu-bg: #ffffff;
  --menu-sidebar-bg: #f8f9fa;
  --menu-card-bg: #ffffff;
  --menu-card-border: #dee2e6;
  --menu-category-bg: #e9ecef;
  --menu-category-hover: #dee2e6;
  --menu-category-selected: #007bff;
}
html[data-theme='dark'],
body[data-theme='dark'],
[data-theme='dark'] {
  --primary-color: #007bff;
  --primary-hover: #0056b3;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;
  --text-primary: #ffffff;
  --text-secondary: #adb5bd;
  --text-muted: #6c757d;
  --text-light: #ffffff;
  --bg-primary: #1a1a1a;
  --bg-secondary: #242424;
  --bg-tertiary: #2a2a2a;
  --bg-card: #242424;
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --border-primary: #495057;
  --border-secondary: #343a40;
  --border-light: #333333;
  --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-heavy: 0 8px 24px rgba(0, 0, 0, 0.4);
  --input-bg: #181818;
  --input-border: #444;
  --input-focus: #007bff;
  --input-text: #ffffff;
  --input-placeholder: #6c757d;
  --btn-primary-bg: #007bff;
  --btn-primary-hover: #0056b3;
  --btn-secondary-bg: #6c757d;
  --btn-secondary-hover: #545b62;
  --btn-success-bg: #28a745;
  --btn-success-hover: #218838;
  --btn-danger-bg: #dc3545;
  --btn-danger-hover: #c82333;
  --btn-outline-border: #007bff;
  --btn-outline-text: #007bff;
  --btn-outline-hover-bg: #007bff;
  --btn-outline-hover-text: #ffffff;
  --card-bg: #242424;
  --card-border: #495057;
  --card-shadow: var(--shadow-light);
  --modal-bg: #242424;
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --basket-bg: #1a1a1a;
  --basket-card-bg: #2a2a2a;
  --basket-border: #495057;
  --basket-item-border: #444;
  --basket-total-border: #333;
  --menu-bg: #1a1a1a;
  --menu-sidebar-bg: #242424;
  --menu-card-bg: #242424;
  --menu-card-border: #495057;
  --menu-category-bg: #343a40;
  --menu-category-hover: #495057;
  --menu-category-selected: #007bff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --text-primary: #ffffff;
    --text-secondary: #adb5bd;
    --text-muted: #6c757d;
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #2a2a2a;
    --bg-card: #242424;
    --border-primary: #495057;
    --border-secondary: #343a40;
    --border-light: #333333;
    --input-bg: #181818;
    --input-border: #444;
    --input-text: #ffffff;
    --card-bg: #242424;
    --card-border: #495057;
    --basket-bg: #1a1a1a;
    --basket-card-bg: #2a2a2a;
    --basket-border: #495057;
    --menu-bg: #1a1a1a;
    --menu-sidebar-bg: #242424;
    --menu-card-bg: #242424;
    --menu-card-border: #495057;
  }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --text-primary: #213547;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-card: #ffffff;
    --border-primary: #dee2e6;
    --border-secondary: #ced4da;
    --border-light: #f1f3f4;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-text: #213547;
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --basket-bg: #ffffff;
    --basket-card-bg: #ffffff;
    --basket-border: #dee2e6;
    --menu-bg: #ffffff;
    --menu-sidebar-bg: #f8f9fa;
    --menu-card-bg: #ffffff;
    --menu-card-border: #dee2e6;
  }
}
:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: light dark;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  font-weight: 500;
  color: var(--primary-color);
}
a:hover {
  color: var(--primary-hover);
}
body {
  margin: 0;
  /* display: flex; */
  /* place-items: center; */
  min-width: 320px;
  min-height: 100%;
  width: 100%;
  background-color: var(--color-white);
}
h1 {
  font-size: 3.2em;
  line-height: 1.1;
}
button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: var(--btn-primary-bg);
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.25s ease;
}
button:hover {
  background-color: var(--btn-primary-hover);
  border-color: var(--primary-color);
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}
main {
  width: auto;
  max-width: 100%;
}
#root {
  width: 100% !important;
}
.Toastify__toast-container {
  pointer-events: none !important;
}
.Toastify__toast {
  pointer-events: auto !important;
}
.Toastify__toast-body {
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.Toastify__close-button:hover {
  background: transparent !important;
}
.notify-error .Toastify__toast-icon svg {
  fill: var(--color-red-500) !important;
}
.notify-error .Toastify__progress-bar--error {
  background-color: var(--color-red-500) !important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
img {
  font-size: 14px;
  line-height: 16px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.animations-paused *,
.animations-paused *:before,
.animations-paused *:after {
  animation-play-state: paused !important;
}
.animations-paused *:not(body) {
  transition-duration: 0.01ms !important;
  transition-delay: 0ms !important;
}
.animations-paused .modal-overlay,
.animations-paused .modal-overlay *,
.animations-paused .modal,
.animations-paused .modal *,
.animations-paused [role='dialog'],
.animations-paused [role='dialog'] *,
.animations-paused [class*='Modal'],
.animations-paused [class*='Modal'] *,
.animations-paused [class*='modal'],
.animations-paused [class*='modal'] *,
.animations-paused .swiper,
.animations-paused .swiper *,
.animations-paused [class*='swiper'],
.animations-paused [class*='swiper'] *,
.animations-paused .swiper-wrapper,
.animations-paused .swiper-slide,
.animations-paused .menu-swiper,
.animations-paused .menu-swiper *,
.animations-paused .top-banner-swiper,
.animations-paused .top-banner-swiper *,
.animations-paused .menu-slider,
.animations-paused .menu-slider-container,
.animations-paused .menu-slider-container *,
.animations-paused .Toastify__toast-container,
.animations-paused .Toastify__toast-container *,
.animations-paused [class*='Toastify'],
.animations-paused [class*='Toastify'] * {
  animation-play-state: running !important;
  transition-duration: 0.3s !important;
  transition-delay: 0ms !important;
}
.animations-paused [class*='gm-'],
.animations-paused [class*='gm-'] *,
.animations-paused [id*='map'],
.animations-paused [id*='map'] *,
.animations-paused [class*='google-map'],
.animations-paused [class*='google-map'] *,
.animations-paused [class*='GoogleMap'],
.animations-paused [class*='GoogleMap'] * {
  animation-play-state: running !important;
  transition-duration: unset !important;
  transition-delay: unset !important;
}
.animations-paused .menu-slider {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(0) !important;
}
.animations-paused img[src$='.gif'],
.animations-paused video {
  animation-play-state: paused !important;
}
.animations-paused [class*='marker']:not([class*='gm-']),
.animations-paused [class*='Marker']:not([class*='gm-']) {
  transition: none !important;
  transition-duration: 0ms !important;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.top-skip-link {
  position: absolute;
  top: 0;
  left: 8px;
  background: var(--color-red-500);
  color: var(--color-white);
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  z-index: 9999;
  transform: translateY(-100%);
  transition: transform 0.3s;
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 18px;
}
.top-skip-link:focus {
  transform: translateY(0);
  top: 8px;
}
.top-skip-link:hover {
  color: var(--color-white);
  background: var(--color-red-600);
}
.favorites-tabs-fieldset,
.recents-tabs-fieldset,
.location-tabs-fieldset,
.tip-tabs-fieldset,
.modifier-toggle-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.favorites-tabs-legend,
.recents-tabs-legend,
.location-tabs-legend,
.tip-tabs-legend,
.modifier-toggle-legend,
.favorites-radio-input,
.recents-radio-input,
.location-radio-input,
.tip-radio-input,
.modifier-toggle-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.favorites-radio-group,
.recents-radio-group,
.location-radio-group,
.tip-radio-group,
.modifier-toggle-radio-group {
  display: flex;
  gap: 8px;
}
.favorites-radio-item,
.recents-radio-item,
.location-radio-item,
.tip-radio-item,
.modifier-toggle-radio-item {
  flex: 1;
}
.favorites-radio-label,
.recents-radio-label,
.location-radio-label,
.tip-radio-label,
.modifier-toggle-radio-label {
  display: block;
  width: 100%;
  cursor: pointer;
}
.favorites-radio-input:focus + .favorites-radio-label,
.recents-radio-input:focus + .recents-radio-label,
.location-radio-input:focus + .location-radio-label,
.tip-radio-input:focus + .tip-radio-label,
.modifier-toggle-radio-input:focus + .modifier-toggle-radio-label {
  outline: 2px solid var(--color-primary, #007bff);
  outline-offset: 2px;
}
.favorites-radio-input:focus:not(:focus-visible) + .favorites-radio-label,
.recents-radio-input:focus:not(:focus-visible) + .recents-radio-label,
.location-radio-input:focus:not(:focus-visible) + .location-radio-label,
.tip-radio-input:focus:not(:focus-visible) + .tip-radio-label,
.modifier-toggle-radio-input:focus:not(:focus-visible)
  + .modifier-toggle-radio-label {
  outline: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--color-white, #ffffff) inset !important;
  box-shadow: 0 0 0 1000px var(--color-white, #ffffff) inset !important;
  -webkit-text-fill-color: inherit !important;
  background-color: transparent !important;
  background: transparent !important;
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
}
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(
    var(--toastify-toast-offset),
    env(safe-area-inset-top)
  );
  --toastify-toast-right: max(
    var(--toastify-toast-offset),
    env(safe-area-inset-right)
  );
  --toastify-toast-left: max(
    var(--toastify-toast-offset),
    env(safe-area-inset-left)
  );
  --toastify-toast-bottom: max(
    var(--toastify-toast-offset),
    env(safe-area-inset-bottom)
  );
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}
.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translate(-50%);
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translate(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
}
@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translate(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translate(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0 4px 12px #0000001a;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}
.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 6px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  -ms-flex: 1;
  flex: 1;
}
.Toastify__toast-icon {
  -webkit-margin-end: 10px;
  margin-inline-end: 10px;
  width: 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -ms-flexbox;
  display: flex;
}
.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}
.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}
@media only screen and (max-width: 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light,
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}
.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}
.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  -ms-flex-item-align: start;
  align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}
@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}
.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}
@keyframes Toastify__bounceInRight {
  0%,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  0%,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  0%,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translateZ(0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  0%,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}
.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}
@keyframes Toastify__zoomIn {
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}
.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}
@keyframes Toastify__flipIn {
  0% {
    transform: perspective(400px) rotateX(90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotateX(-20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotateX(10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  0% {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotateX(-20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}
.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}
@keyframes Toastify__slideInRight {
  0% {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  0% {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  0% {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  0% {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  0% {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  0% {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  0% {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  0% {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}
.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
@keyframes Toastify__spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
}
.qr-code-canvas {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  display: block;
  max-width: 100%;
  height: auto;
  width: 100%;
}
.qr-code-label {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
}
.qr-code-error {
  text-align: center;
  padding: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
}
.qr-code-error p {
  margin: 0 0 8px;
  font-size: 14px;
}
.qr-code-fallback {
  font-size: 12px !important;
  color: var(--text-muted) !important;
}
.qr-code-debug {
  font-size: 10px;
  color: var(--text-muted);
  margin: 4px 0 0;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font-myriad-pro-black-condensed);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  min-width: 120px;
  white-space: nowrap;
}
button svg {
  flex-shrink: 0;
}
.button:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.6) 10%,
    transparent 10.01%
  );
  background-position: center;
  transform: scale(10);
  opacity: 0;
  transition:
    transform 0.5s,
    opacity 1s;
}
.button:active:after {
  transform: scale(0);
  opacity: 1;
  transition: 0s;
}
.button--small {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.2;
}
.button--medium {
  padding: 10px 20px;
  font-size: 20px;
  line-height: 1.2;
}
.button--large {
  padding: 16px;
  font-size: 24px;
  line-height: 1.2;
}
.button--fill.button--primary {
  background-color: var(--color-red-500);
  color: var(--color-white);
  border: 2px solid var(--color-red-500);
}
.button--fill.button--primary:hover {
  background-color: var(--color-red-600);
  border-color: var(--color-red-600);
}
.button--fill.button--secondary {
  background-color: var(--color-yellow-400);
  color: var(--color-neutrals-800);
  border: 2px solid var(--color-yellow-400);
}
.button--fill.button--secondary:hover {
  background-color: var(--color-yellow-500);
  border-color: var(--color-yellow-500);
}
.button--fill.button--dark {
  background-color: var(--color-neutrals-800);
  color: var(--color-white);
  border: 2px solid var(--color-neutrals-800);
}
.button--fill.button--dark:hover {
  background-color: #000;
  border-color: #000;
}
.button--fill.button--blue {
  background-color: var(--color-blue);
  color: var(--color-white);
  border: 2px solid var(--color-blue);
}
.button--fill.button--blue:hover {
  background-color: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
}
.button--outline.button--primary {
  background-color: transparent;
  color: var(--color-red-500);
  border: 2px solid var(--color-red-500);
}
.button--outline.button--primary:hover {
  background-color: var(--color-red-500);
  color: var(--color-white);
}
.button--outline.button--secondary {
  background-color: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
}
.button--outline.button--secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}
.button--outline.button--dark {
  background-color: var(--color-white);
  color: var(--color-neutrals-800);
  border: 2px solid var(--color-neutrals-800);
}
.button--outline.button--blue {
  background-color: var(--color-white);
  color: var(--color-blue-500);
  border: 2px solid var(--color-blue-500);
}
.button--outline.button--blue:hover {
  background-color: var(--color-blue-500);
  color: var(--color-white);
}
.button--disabled {
  cursor: not-allowed;
  background-color: var(--color-neutrals-100) !important;
  color: var(--color-neutrals-500) !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--color-neutrals-100) !important;
}
.button--disabled:hover {
  background-color: var(--color-neutrals-100) !important;
  color: var(--color-neutrals-500) !important;
}
.button--disabled:after {
  transform: none !important;
  opacity: 0 !important;
}
.button--outline.button--disabled:hover {
  background-color: var(--color-neutrals-100) !important;
  color: var(--color-neutrals-500) !important;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00000080;
  display: flex;
  justify-content: center;
  z-index: 1500;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: modalOverlayFadeIn 0.3s ease-out;
}
.modal-overlay--bottom {
  align-items: flex-end;
  padding: 0;
}
.modal-overlay--center {
  align-items: center;
  padding: 20px;
}
.modal {
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal--large {
  max-width: 1280px;
  height: 100%;
}
.modal--large .modal-content {
  height: 100%;
  overflow-y: hidden;
}
.modal--bottom {
  height: 100%;
  justify-content: flex-end;
  animation: modalSlideUp 0.3s ease-out;
}
.modal--center {
  max-height: 90vh;
  justify-content: flex-start;
  animation: modalFadeIn 0.3s ease-out;
}
.modal--center .modal-action-buttons {
  margin-top: 0;
}
.modal-content {
  padding: 0;
  overflow-y: auto;
  background-color: var(--color-white);
}
.modal--bottom .modal-content {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.modal--center .modal-content {
  border-radius: 16px;
  max-height: calc(90vh - 80px);
}
.modal-content::-webkit-scrollbar {
  width: 0;
}
.modal-close-button {
  background: var(--color-white);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-neutrals-800);
  z-index: 10;
  padding: 0;
  align-self: flex-end;
  margin: 4px;
  flex-shrink: 0;
}
.modal-close-button:hover {
  background: var(--color-neutrals-100);
}
.modal-close-button:active {
  transform: scale(0.95);
}
.modal--bottom.modal--closing {
  animation: modalSlideDown 0.3s ease-out;
}
.modal--center.modal--closing {
  animation: modalFadeOut 0.3s ease-out;
}
.modal-overlay--closing {
  animation: modalOverlayFadeOut 0.3s ease-out;
}
.modal-action-buttons {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
}
.button-justify-end {
  justify-content: flex-end;
}
@keyframes modalSlideUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes modalSlideDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100%);
  }
}
@keyframes modalOverlayFadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes modalFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes modalFadeOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}
@media screen and (max-width: 768px) {
  .modal-action-buttons {
    margin-top: 12px;
  }
  .modal-close-button {
    align-self: flex-start;
    margin-left: 16px;
    margin-right: 16px;
  }
  .modal-overlay--center {
    padding: 16px;
  }
  .modal--center .modal-content {
    max-height: calc(90vh - 64px);
  }
}
.homepage-popup.modal {
  max-width: 440px;
}
.homepage-popup .modal-content {
  overflow: visible;
}
.homepage-popup-content {
  position: relative;
}
.homepage-popup-content .homepage-popup-character-logo {
  position: absolute;
  left: 16px;
  top: -62px;
  z-index: 0;
  color: var(--color-neutrals-200);
}
.homepage-popup-header {
  background-color: var(--color-red-500);
  text-align: center;
  padding: 16px 24px;
  position: relative;
  overflow: hidden;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.homepage-popup-header:before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 70%
  );
  animation: shimmer 3s ease-in-out infinite;
  transform: rotate(-45deg);
}
.homepage-popup-header h2 {
  color: var(--color-white);
  font-size: 32px;
  line-height: 32px;
  margin-top: 6px;
}
.homepage-popup-subheader,
.homepage-popup-body {
  text-align: center;
  padding: 16px;
}
.homepage-popup-subheader h3 {
  color: var(--color-neutrals-800);
  font-size: 24px;
  line-height: 24px;
}
.homepage-popup-body p {
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 16px;
  line-height: 24px;
}
.homepage-popup-image {
  display: flex;
  justify-content: center;
  align-items: center;
}
.homepage-popup-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 220px;
}
.homepage-popup-cta {
  padding: 16px;
  border-top: 1px solid var(--color-neutrals-100);
  box-shadow: 0 0 20px 4px #d8d8d852;
}
.homepage-popup-cta-button {
  width: 100%;
}
@keyframes shimmer {
  0% {
    transform: translate(-100%) rotate(-45deg);
  }
  to {
    transform: translate(100%) rotate(-45deg);
  }
}
.tooltip-box {
  background-color: var(--color-neutrals-600);
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 12px;
  box-shadow: 0 2px 10px #0003;
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  will-change: top, left, opacity, transform;
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-white);
}
.tooltip-wrapper {
  position: relative;
  display: flex;
  cursor: pointer;
}
.tooltip-arrow {
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: var(--color-neutrals-600);
  transform: rotate(45deg);
  border-radius: 4px;
  box-shadow: 0 2px 2px #0000001a;
}
.tooltip-arrow-left {
  left: 15px;
}
.tooltip-arrow-center {
  left: 50%;
  transform: translate(-50%) rotate(45deg);
}
.tooltip-arrow-right {
  right: 15px;
}
.tooltip-arrow-bottom {
  bottom: 100%;
  margin-bottom: 0;
  top: -8px;
}
.tooltip-title {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-white);
  text-align: left;
}
.tooltip-description {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-200);
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-align: left;
}
.tooltip-description sup {
  font-size: 10px;
  line-height: 0;
}
.tooltip-box a {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-200);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.tooltip-box a:hover {
  cursor: pointer;
  color: var(--color-neutrals-100);
}
.distance-warning-modal .modal-content {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}
.distance-warning-header {
  padding: 36px 40px;
  border-bottom: 1px solid var(--color-neutrals-100);
  position: relative;
  overflow: hidden;
}
.distance-warning-header h2 {
  font-size: 64px;
  line-height: 64px;
  padding: 0;
  text-align: start;
}
.distance-warning-modal-body {
  padding: 24px 40px;
  max-height: 472px;
  overflow-y: auto;
}
.section-title {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
  margin-bottom: 20px;
}
.distance-warning-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
.distance-warning-actions button {
  width: 100%;
}
@media (max-width: 768px) {
  .distance-warning-header h2 {
    font-size: 40px;
    line-height: 40px;
  }
  .distance-warning-modal-body {
    padding: 16px;
  }
  .section-title {
    font-size: 24px;
    line-height: 24px;
  }
}
.restaurant-change-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00000080;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.restaurant-change-modal {
  background: var(--background-color, #ffffff);
  border-radius: 12px;
  box-shadow: 0 10px 25px #0003;
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.restaurant-change-modal-header {
  padding: 1.5rem 1.5rem 0;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.restaurant-change-modal-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-color, #1f2937);
  text-align: center;
}
.restaurant-change-modal-content {
  padding: 1.5rem;
  text-align: center;
}
.restaurant-change-modal-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}
.restaurant-change-modal-message {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-color, #374151);
  margin-bottom: 1rem;
}
.restaurant-change-modal-transfer-result {
  text-align: center;
}
.restaurant-change-modal-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary, #6b7280);
  margin: 1rem 0 0.5rem;
  font-weight: 500;
}
.restaurant-change-modal-items-not-transferred {
  margin-top: 1rem;
  padding: 0.75rem;
  background: var(--background-secondary, #f3f4f6);
  border-radius: 6px;
  border-left: 3px solid var(--warning-color, #f59e0b);
}
.restaurant-change-modal-items-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}
.restaurant-change-modal-item {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.restaurant-change-modal-item:last-child {
  border-bottom: none;
}
.restaurant-change-modal-error {
  color: var(--error-color, #dc2626) !important;
  font-weight: 500;
}
.restaurant-change-modal-actions {
  padding: 0 1.5rem 1.5rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.restaurant-change-modal-cancel-button,
.restaurant-change-modal-confirm-button {
  flex: 1;
  max-width: 120px;
}
@media (prefers-color-scheme: dark) {
  .restaurant-change-modal {
    --background-color: #1f2937;
    --text-color: #f9fafb;
    --border-color: #374151;
  }
}
@media (max-width: 640px) {
  .restaurant-change-modal {
    margin: 1rem;
    max-width: none;
  }
  .restaurant-change-modal-actions {
    flex-direction: column;
  }
  .restaurant-change-modal-cancel-button,
  .restaurant-change-modal-confirm-button {
    max-width: none;
  }
}
.hand-off-modal {
  max-width: 560px;
  z-index: 1600;
}
.hand-off-modal-overlay {
  z-index: 1600 !important;
}
.hand-off-modal .modal-content {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
.time-selection {
  overflow: auto;
  flex: 1;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
  box-shadow: 0 0 20px 4px #d8d8d852;
}
.hand-off-header {
  padding: 24px 40px;
  border-bottom: 1px solid var(--color-neutrals-100);
  white-space: nowrap;
}
.hand-off-header h2 {
  padding: 0;
  line-height: 24px;
  margin-bottom: -4px;
}
.hand-off-header .location-modal-card-badge {
  min-width: 83px;
  overflow: hidden;
  text-wrap: auto;
  text-align: center;
  flex-shrink: 0;
}
.hand-off-header .service-tabs {
  border: 1px solid var(--color-neutrals-200);
  background-color: var(--color-white);
  padding: 4px;
  border-radius: 100px;
  min-width: 263px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.hand-off-header .service-tab {
  outline: none;
  border: none;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 14px;
  line-height: 20px;
  width: 100%;
  min-width: 64px;
  padding: 4px 16px;
  background-color: transparent;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hand-off-header .service-tab.active {
  background-color: var(--color-yellow-500);
}
.time-selection-header {
  padding: 24px 40px;
  box-shadow: 0 0 20px 4px #d8d8d852;
}
.time-selection-header h1 {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-neutrals-800);
  margin-bottom: 12px;
}
.title-ellipsis h2 {
  max-width: 365px;
  text-wrap: auto;
}
.time-selection-fieldset,
.service-tabs-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.time-selection-legend,
.service-tabs-legend,
.time-selection-radio-input,
.service-radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.time-selection-radio-group,
.service-radio-group {
  display: flex;
  gap: 8px;
}
.time-selection-radio-item,
.service-radio-item {
  flex: 1;
}
.time-selection-radio-label,
.service-radio-label {
  display: block;
  width: 100%;
  cursor: pointer;
}
.location-tab {
  gap: 8px;
}
.tab-button {
  flex: 1;
  padding: 12px 24px;
  background: none;
  border: 1px solid var(--color-neutrals-200);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-neutrals-600);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 8px;
  font-family: var(--font-myriad-pro-black-condensed);
  white-space: nowrap;
}
.hand-off-tab-button:hover:not(.disabled) {
  background-color: var(--color-neutrals-100);
  color: var(--color-neutrals-800);
  border-color: var(--color-neutrals-300);
}
.hand-off-tab-button.active {
  background-color: var(--color-yellow-500);
  color: var(--color-neutrals-800);
  border-color: var(--color-yellow-500);
}
.hand-off-tab-button.disabled {
  background-color: var(--color-neutrals-100);
  color: var(--color-neutrals-400);
  border-color: var(--color-neutrals-200);
  cursor: not-allowed;
  opacity: 0.6;
}
.hand-off-tab-button.disabled:hover {
  background-color: var(--color-neutrals-100);
  color: var(--color-neutrals-400);
  border-color: var(--color-neutrals-200);
}
.modal-footer {
  padding: 20px 40px;
}
.modal-footer.asap {
  padding: 40px;
}
.hand-off-modal .modal-footer.flex-center {
  display: flex;
  justify-content: center;
}
.selected-time-display h2,
.selected-time-display h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 0;
  line-height: 24px;
}
.selected-time-display h3 {
  font-size: 20px;
}
.selected-time-display h2 svg,
.selected-time-display h3 svg {
  margin-top: -6px;
}
.continue-button {
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
}
.footer-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-wrap: wrap;
}
.footer-buttons-container.authenticated-handOff-footer {
  width: 100%;
}
.start-group-order-button {
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  width: 100%;
}
.hand-off-modal .modal-footer {
  flex-wrap: wrap;
  gap: 12px;
}
@media screen and (min-width: 769px) {
  .footer-buttons-container {
    flex-direction: row;
  }
  .continue-button,
  .start-group-order-button {
    flex: 1;
  }
}
.schedule-section {
  padding: 24px 40px;
}
.schedule-section h2 {
  line-height: 24px;
  padding-bottom: 16px;
  text-align: left;
}
.date-time-container {
  display: flex;
  gap: 8px;
}
.calendar-container,
.time-picker-section {
  box-shadow: 0 0 20px 4px #d8d8d852;
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 16px 24px;
}
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.month-year {
  font-size: 20px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-black-condensed);
}
.nav-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutrals-600);
  transition: all 0.2s ease;
}
.nav-button:hover {
  background-color: var(--color-neutrals-100);
  color: var(--color-neutrals-800);
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar-day {
  aspect-ratio: 1;
  border: none;
  background: none;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-neutrals-600);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}
.calendar-day:hover {
  background-color: var(--color-neutrals-100);
}
.calendar-day.today {
  background-color: var(--color-red-50);
  color: var(--color-red-500);
  border: 1px solid var(--color-red-500);
}
.calendar-day.past {
  color: var(--color-neutrals-300);
  cursor: not-allowed;
  pointer-events: none;
}
.calendar-day.past:hover {
  background-color: transparent;
}
.calendar-day.unavailable {
  color: var(--color-neutrals-300);
  cursor: not-allowed;
  pointer-events: none;
}
.calendar-day.unavailable:hover {
  background-color: transparent;
}
.time-picker-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.time-picker-section .time-picker-title {
  font-size: 20px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-black-condensed);
}
.custom-time-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background-color: var(--color-white);
}
.time-input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 124px;
}
.time-adjust-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutrals-600);
  transition: all 0.2s ease;
}
.time-adjust-button:hover:not(.disabled) {
  background-color: var(--color-neutrals-100);
  color: var(--color-neutrals-800);
}
.time-adjust-button.disabled {
  color: var(--color-neutrals-300);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.time-adjust-button.disabled:hover {
  background-color: transparent;
  color: var(--color-neutrals-300);
}
.time-display,
.time-separator {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.period-toggle {
  display: flex;
  gap: 4px;
  border: 1px solid var(--color-neutrals-200);
  border-radius: 20px;
  padding: 3px;
  background-color: var(--color-white);
}
.period-button {
  padding: 0;
  border: none;
  border-radius: 18px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: transparent;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-black-condensed);
  width: 56px;
  height: 28px;
}
.period-button.active {
  background-color: var(--color-neutrals-800);
  color: var(--color-white);
}
.period-button:hover:not(.active):not(.disabled) {
  background-color: var(--color-neutrals-100);
}
.period-button.disabled {
  color: var(--color-neutrals-300);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}
.period-button.disabled:hover {
  background-color: transparent;
}
.time-slot-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.date-section {
  flex: 1;
}
.time-slot-button {
  padding: 12px 8px;
  border: 2px solid var(--color-neutrals-200);
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-neutrals-800);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-myriad-pro-black-condensed);
  min-width: 0;
  word-break: break-word;
}
.time-slot-button:hover {
  border-color: var(--color-neutrals-200);
  background-color: var(--color-neutrals-50);
}
.time-slot-button.selected {
  border-color: var(--color-red-500);
  background-color: var(--color-primary);
}
.time-slot-button.selected:hover {
  border-color: var(--color-red-500);
  background-color: var(--color-primary-dark);
}
.time-picker-unavailable {
  text-align: center;
  color: var(--color-neutrals-600);
  font-size: 14px;
}
.error-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin: 0 16px 16px;
  background-color: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: 8px;
  color: #c53030;
  font-size: 14px;
  line-height: 20px;
}
.error-message svg {
  flex-shrink: 0;
}
.continue-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.continue-button:disabled:hover {
  background-color: var(--color-primary);
  transform: none;
}
.hand-off-modal-disclaimer {
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
@media screen and (max-width: 768px) {
  .hand-off-header {
    padding: 18px 16px;
  }
  .hand-off-header h2 {
    font-size: 20px;
    line-height: 20px;
  }
  .time-selection-header {
    padding: 16px;
  }
  .time-selection-header h1 {
    font-size: 24px;
    line-height: 24px;
  }
  .schedule-section {
    padding: 16px;
  }
  .date-time-container {
    flex-direction: column;
  }
  .time-slot-list {
    grid-template-columns: repeat(4, 1fr);
  }
  .modal-footer {
    padding: 24px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .modal-footer button {
    width: 100%;
  }
}
.action-confirmation-modal {
  padding: 40px;
}
.action-confirmation-header {
  text-align: center;
}
.action-confirmation-header h2 {
  font-size: 40px;
  text-align: left;
  line-height: 41px;
  font-weight: 700;
  color: var(--color-neutrals-900);
  margin: 0 0 12px;
  line-height: 1.2;
  font-family: var(--font-sink);
}
.action-confirmation-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-neutrals-900);
  margin: 0 0 16px;
  line-height: 1.2;
  font-family: var(--font-sink);
}
.action-confirmation-description {
  font-size: 16px;
  line-height: 22px;
  color: var(--color-neutrals-500);
  margin: 0 0 24px;
  text-align: left;
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-weight: 600;
}
.action-confirmation-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.action-confirmation-btn {
  width: 100%;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-transform: none;
  letter-spacing: 0;
}
.action-confirmation-btn--primary {
  background-color: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-primary);
}
.action-confirmation-btn--primary:hover {
  background-color: var(--color-primary-dark, #b91c1c);
  border-color: var(--color-primary-dark, #b91c1c);
}
.action-confirmation-btn--secondary {
  background-color: #fff;
  color: #000;
  border: 2px solid #000000;
}
.action-confirmation-btn--secondary:hover {
  background-color: #f3f4f6;
}
.action-confirmation-footer {
  text-align: center;
  padding-top: 12px;
}
.action-confirmation-faq-link-container {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-weight: 600;
}
.action-confirmation-faq-link {
  color: var(--color-neutrals-800);
  text-decoration: underline;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s ease;
  margin-left: 5px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-weight: 900;
}
.action-confirmation-faq-link:hover {
  color: var(--color-neutrals-600);
}
.action-confirmation-modal-overlay {
  z-index: 1601 !important;
}
@media (max-width: 768px) {
  .action-confirmation-modal {
    padding: 16px;
  }
  .action-confirmation-buttons {
    gap: 10px;
  }
  .action-confirmation-btn {
    padding: 14px 20px;
    font-size: 15px;
  }
  .action-confirmation-header h2 {
    font-size: 24px;
  }
  .action-confirmation-description {
    font-size: 14px;
  }
}
.sign-in-modal {
  max-height: fit-content;
}
.sign-in-modal .modal-content {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
.enter-email-password-section {
  flex: 1;
  padding: 24px 40px;
  overflow: auto;
}
.enter-email-password-header {
  margin-bottom: 18px;
}
.enter-email-password-header h4 {
  font-size: 32px;
  line-height: 32px;
}
.enter-email-password-header p {
  color: var(--color-neutrals-300);
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.reset-password-link {
  background: none;
  border: none;
  text-decoration: none;
  color: var(--color-black);
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-decoration: underline;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  float: right;
  text-align: right;
}
.reset-password-link:hover {
  color: var(--color-red-500);
  text-decoration: underline;
  background: none;
}
.reset-password-link:disabled {
  color: var(--color-neutrals-300);
  cursor: not-allowed;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .enter-email-password-section {
    padding: 16px;
  }
  .enter-email-password-header h4 {
    font-size: 24px;
    line-height: 24px;
  }
  .enter-email-password-header p {
    font-size: 16px;
    line-height: 24px;
  }
  .sign-in-modal .modal-button-container {
    margin-bottom: 16px;
  }
}
.enter-email-password-section .delivery-error {
  margin-top: 25px;
}
@media (max-height: 400px) {
  .sign-in-modal .modal-content {
    overflow: auto;
    display: block;
  }
}
.stepper-container {
  display: flex;
}
.stepper-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}
.step-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.step-circle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform: scale(0.7);
}
.step-circle-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.step-line {
  height: 2px;
  flex: 1;
  background-color: var(--color-neutrals-500);
}
.step-line.completed {
  background-color: var(--color-red-500);
}
.step-line.transparent {
  background-color: transparent;
}
.step-label {
  font-size: 12px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
  white-space: nowrap;
  margin: 0 8px;
}
.step-label.required {
  font-family: var(--font-myriad-pro-black-condensed);
}
.step-label.active {
  color: var(--color-red-500);
}
.step-wrapper:not(:last-child) .step-line {
  width: 100%;
  right: -50%;
}
.step-circle.active,
.step-circle.completed {
  opacity: 1;
  transform: scale(1);
}
.step-label {
  transition: color 0.3s ease;
}
.step-content {
  margin-top: 8px;
}
.step-title {
  font-size: 16px;
  line-height: 16px;
}
.step-subtitle {
  color: var(--color-neutrals-800);
  font-size: 14px;
  line-height: 14px;
}
.input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid var(--color-neutrals-800);
  position: relative;
  gap: 8px;
  margin-top: 12px;
}
.input-wrapper.has-error {
  border-color: var(--color-red-800);
  border-width: 2px;
}
.input-wrapper.has-error .floating-label,
.input-wrapper.has-error .input {
  color: var(--color-red-800);
}
.input-wrapper .input {
  flex-grow: 1;
  border: none;
  outline: none;
  background: inherit;
  font-size: 20px;
  padding: 10px 0;
  font-family: var(--font-myriad-pro-semibold-condensed);
  min-height: 30px;
  color: var(--color-neutrals-800);
}
.input-wrapper .prefix {
  font-size: 20px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-green-600);
}
.input-wrapper:not(:focus-within) .input[type='date'].input[value=''] {
  opacity: 0;
}
.input-wrapper .input::placeholder {
  font-size: 20px;
  color: var(--color-neutrals-300);
}
.input-wrapper .input:focus {
  caret-color: var(--color-red-800);
}
span.required {
  color: var(--color-red-500);
}
.floating-label {
  position: absolute;
  top: 44%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.2s linear;
  color: var(--color-neutrals-800);
  pointer-events: none;
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 18px;
  line-height: 20px;
}
.floating-label.floating {
  top: -3px;
  left: 0;
  font-size: 16px;
}
.helper-text {
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
}
.error-text {
  color: var(--color-red-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  letter-spacing: 0px;
}
.clear-button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-neutrals-800);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clear-button:hover {
  background: transparent;
}
.input-wrapper .input:-webkit-autofill,
.input-wrapper .input:-webkit-autofill:hover,
.input-wrapper .input:-webkit-autofill:focus,
.input-wrapper .input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--color-white, #ffffff) inset !important;
  box-shadow: 0 0 0 1000px var(--color-white, #ffffff) inset !important;
  -webkit-text-fill-color: var(--color-neutrals-800, #333) !important;
  background-color: transparent !important;
  background: transparent !important;
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
}
.delivery-error {
  margin-top: 16px;
  padding: 20px 24px;
  border: 1px solid var(--color-red-600);
  border-radius: 16px;
}
.attention-text {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--color-red-700);
}
.attention-text svg {
  margin-top: -3px;
  flex-shrink: 0;
}
.attention-text h5 {
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 0px;
}
.delivery-error p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 20px;
  line-height: 28px;
  margin-top: 16px;
  color: var(--color-neutrals-500);
}
.join-now-modal .modal-content {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
.modal-header {
  min-height: 152px;
  padding: 36px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-neutrals-100);
  overflow: hidden;
  position: relative;
}
.modal-character-logo {
  position: absolute;
  top: 25px;
  right: 5px;
}
.modal-header-content {
  width: max-content;
  position: relative;
}
.modal-header-content .tm-icon {
  position: absolute;
  top: -5px;
  right: -25px;
}
.modal-header-text {
  font-size: 64px;
  line-height: 64px;
  position: relative;
  color: var(--color-neutrals-800);
}
.modal-header-thanks-text {
  font-size: 48px;
  line-height: 48px;
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  transform: rotate(-4deg);
  display: block;
  position: relative;
  margin-top: -15px;
  margin-right: -25px;
  text-align: right;
}
.modal-content-section {
  height: 170px;
  background-image: url(/assets/mobile-reward-bg---i1E9A8.webp);
  background-size: contain;
  background-position: center;
}
.main-modal-content {
  background: radial-gradient(#ffffffe6 13.22%, #fff9 47.28%, #fff0 80%);
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  align-items: center;
  width: 100%;
  height: 100%;
}
.modal-content-section h4 {
  font-size: 40px;
  line-height: 40px;
}
.modal-content-section p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
  text-align: center;
}
.modal-button-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 40px 40px;
  border-top: 1px solid var(--color-neutrals-100);
}
.modal-social-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-social-buttons button {
  gap: 8px;
}
.modal-footer-text {
  text-align: center;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.modal-footer-link {
  text-decoration: none;
  color: var(--color-black);
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-decoration: underline;
}
.modal-footer-link:hover {
  color: var(--color-red-500);
  text-decoration: underline;
}
.modal-stepper-container {
  min-height: 80px;
  padding: 24px 40px;
  border-bottom: 1px solid var(--color-neutrals-100);
}
.modal-update-prev-button {
  background: var(--color-white);
  border: none;
  border-radius: 250px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-neutrals-800);
  z-index: 10;
  padding: 12px 24px;
  align-self: flex-end;
  margin: 4px;
  flex-shrink: 0;
  font-family: var(--font-myriad-pro-black-condensed);
  gap: 8px;
}
.modal-action-buttons .modal-update-prev-button {
  margin-right: auto;
}
.modal-update-prev-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.modal-update-prev-button:hover {
  background: var(--color-neutrals-100);
}
@media screen and (max-width: 768px) {
  .modal-header {
    padding: 24px 16px;
    min-height: 100px;
  }
  .modal-header-text {
    font-size: 40px;
    line-height: 40px;
  }
  .modal-header-thanks-text {
    font-size: 32px;
    line-height: 32px;
    margin-top: -9px;
    margin-right: -45px;
  }
  .modal-header-content .tm-icon {
    width: 20px;
    height: 12px;
    right: -20px;
  }
  .modal-button-container {
    padding: 24px 16px;
  }
  .modal-character-logo {
    width: 140px;
    height: 140px;
    top: 8px;
    right: 2px;
  }
  .main-modal-content {
    padding: 16px;
  }
  .modal-content-section h4 {
    font-size: 32px;
    line-height: 32px;
  }
  .modal-stepper-container {
    min-height: 64px;
    padding: 16px;
  }
}
.join-now-modal-lottie-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000000b3;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalOverlayFadeIn 0.3s ease-out;
}
.join-now-modal-lottie-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.join-now-modal-lottie-loader {
  max-width: 300px;
  max-height: 300px;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .join-now-modal-lottie-loader {
    max-width: 300px;
    max-height: 300px;
  }
}
.set-password-section {
  flex: 1;
  padding: 24px 40px;
  min-height: 428px;
  overflow: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.set-password-header {
  margin-bottom: 16px;
}
.set-password-section h4 {
  font-size: 32px;
  line-height: 32px;
}
.set-password-section .set-password-setting-up-text {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
}
.set-password-form-container form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.input-end-icon {
  cursor: pointer;
  margin-right: 9px;
}
@media screen and (max-width: 768px) {
  .set-password-section {
    padding: 16px;
    min-height: 380px;
  }
  .set-password-section h4 {
    font-size: 24px;
    line-height: 24px;
  }
  .set-password-header {
    margin-bottom: 12px;
  }
  .attention-text h5 {
    font-size: 20px;
    line-height: 20px;
  }
  .delivery-error p {
    font-size: 16px;
    line-height: 24px;
    margin-top: 8px;
  }
}
.create-account-section {
  flex: 1;
  padding: 24px 40px;
  min-height: 400px;
  overflow: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.create-account-header {
  margin-bottom: 16px;
}
.create-account-section h4 {
  font-size: 32px;
  line-height: 32px;
}
.create-account-section .create-account-welcome-text {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
}
.create-account-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.create-account-form form :last-child {
  grid-column: span 2;
}
.checkbox-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dob-input svg,
.dob-input input {
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .create-account-section {
    padding: 16px;
    min-height: 380px;
  }
  .create-account-section h4 {
    font-size: 24px;
    line-height: 24px;
  }
  .create-account-header {
    margin-bottom: 12px;
  }
  .create-account-form form {
    grid-template-columns: 1fr;
  }
  .create-account-form form :last-child {
    grid-column: auto;
  }
}
.custom-checkbox {
  display: flex;
  align-items: start;
  cursor: pointer;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
}
.custom-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.custom-checkbox-icon {
  border-radius: 4px;
  border: 2px solid var(--color-neutrals-600);
  min-width: 22px;
  min-height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  margin-right: 9px;
  margin-top: 5px;
  padding: 2px;
  color: var(--color-white);
}
.radio .custom-checkbox-icon {
  border-radius: 50%;
}
.custom-checkbox-input:checked + .custom-checkbox-icon svg {
  visibility: visible;
  transform: scale(1);
}
.custom-checkbox-icon svg {
  display: block;
  visibility: hidden;
  transform: scale(0);
  transition: scale 0.25s linear;
}
.custom-checkbox-input:checked + .custom-checkbox-icon {
  border-color: var(--color-red-500);
  background-color: var(--color-red-500);
}
.custom-checkbox-input:focus + .custom-checkbox-icon {
  outline: 2px solid var(--color-red-500);
  outline-offset: 2px;
}
.custom-checkbox-input:focus:not(:focus-visible) + .custom-checkbox-icon {
  outline: none;
}
.custom-checkbox.disabled .custom-checkbox-input:focus + .custom-checkbox-icon {
  outline: none;
}
.radio .custom-checkbox-input:checked + .custom-checkbox-icon {
  background-color: transparent;
}
.radio .custom-checkbox-input:checked + .custom-checkbox-icon:before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-red-500);
}
.custom-checkbox-label {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
  font-size: 14px;
}
.checkbox-title-text {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 4px;
}
.checkbox-title-text a {
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 18px;
  line-height: 26px;
}
.checkbox-title-text a:hover {
  cursor: pointer;
  color: var(--color-red-500);
}
.checkbox-description-text {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
  font-size: 16px;
  line-height: 24px;
}
.checkbox-description-text a {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-800);
  font-size: 16px;
  line-height: 24px;
}
.checkbox-description-text a:hover {
  cursor: pointer;
  color: var(--color-red-500);
}
.date-picker {
  background: var(--color-white);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  max-width: 320px;
}
.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.nav-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutrals-500);
  transition: background-color 0.2s ease;
}
.nav-button:hover {
  background-color: var(--color-neutrals-200);
}
.month-year-selectors {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  gap: 8px;
}
.custom-dropdown {
  position: relative;
}
.dropdown-trigger {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
  cursor: pointer;
  outline: none;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dropdown-trigger:hover {
  background: var(--color-neutrals-200);
}
.dropdown-trigger:focus {
  background: var(--color-neutrals-200);
  box-shadow: 0 0 0 2px var(--color-red-200);
}
.year-selector {
  min-width: 80px;
}
.dropdown-arrow {
  transition: transform 0.2s ease;
  transform: rotate(90deg);
}
.dropdown-arrow.open {
  transform: rotate(270deg);
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  z-index: 1000;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  min-width: min-content;
}
.dropdown-items {
  max-height: 160px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dropdown-items::-webkit-scrollbar {
  display: none;
}
.scroll-button {
  background: var(--color-neutrals-50);
  border: none;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  width: fit-content;
  margin: auto;
}
.scroll-button:hover {
  background: var(--color-neutrals-200);
}
.scroll-button.scroll-up {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.scroll-button.scroll-down {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.scroll-arrow {
  color: var(--color-neutrals-600);
  transition: transform 0.2s ease;
}
.scroll-arrow.up {
  transform: rotate(-90deg);
}
.scroll-arrow.down {
  transform: rotate(90deg);
}
.dropdown-item {
  width: 100%;
  background: none;
  border: none;
  padding: 8px 12px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-black-condensed);
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-align: center;
}
.dropdown-item:hover {
  background: var(--color-neutrals-200);
}
.dropdown-item.selected {
  background: var(--color-red-50);
  color: var(--color-red-600);
  font-weight: 600;
}
.dropdown-item.selected:hover {
  background: var(--color-red-100);
}
.dropdown-item.disabled {
  color: var(--color-neutrals-300);
  cursor: not-allowed;
  pointer-events: none;
  background-color: transparent;
}
.dropdown-item.disabled:hover {
  background-color: transparent;
}
.days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.day-header {
  text-align: center;
  font-size: 20px;
  color: var(--color-neutrals-400);
  padding: 8px 4px;
  font-family: var(--font-myriad-pro-black-condensed);
}
.calendar-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-neutrals-800);
  transition: all 0.2s ease;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.calendar-day:hover:not(.empty) {
  background-color: var(--color-neutrals-200);
}
.calendar-day.selected {
  background-color: var(--color-red-500);
  color: var(--color-white);
}
.calendar-day.selected:hover {
  background-color: var(--color-red-600);
}
.calendar-day.empty {
  cursor: default;
  pointer-events: none;
}
.calendar-day.disabled {
  color: var(--color-neutrals-300);
  cursor: not-allowed;
  pointer-events: none;
  background-color: transparent;
}
.calendar-day.disabled:hover {
  background-color: transparent;
}
.date-picker-popover {
  position: absolute;
  z-index: 9999;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  max-height: 400px;
  overflow: hidden;
}
.date-picker-popover.open-below {
  animation: popoverSlideDown 0.2s ease-out;
}
.date-picker-popover.open-above {
  animation: popoverSlideUp 0.2s ease-out;
}
@keyframes popoverSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes popoverSlideUp {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 480px) {
  .date-picker {
    padding: 16px;
    max-width: 100%;
  }
  .calendar-day {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .dropdown-trigger {
    font-size: 14px;
    padding: 6px 10px;
    gap: 6px;
  }
  .month-selector {
    min-width: 100px;
  }
  .year-selector {
    min-width: 70px;
  }
  .dropdown-item {
    font-size: 13px;
    padding: 6px 10px;
  }
  .day-header {
    font-size: 12px;
    padding: 6px 2px;
  }
}
.apple-name-form-section {
  flex: 1;
  padding: 24px 40px;
  min-height: 400px;
  overflow: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.apple-name-form-header {
  margin-bottom: 16px;
}
.apple-name-form-section h4 {
  font-size: 32px;
  line-height: 32px;
}
.apple-name-form-section .apple-name-form-welcome-text {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
}
.apple-name-form-section .apple-name-form-email {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
  margin-top: 8px;
}
.apple-name-form-form form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.apple-name-form-form form :last-child {
  grid-column: span 2;
}
.apple-name-form-actions {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.apple-name-form-back-button {
  min-width: 120px;
}
.apple-name-form-submit-button {
  min-width: 160px;
}
@media screen and (max-width: 768px) {
  .apple-name-form-section {
    padding: 16px;
    min-height: 380px;
  }
  .apple-name-form-section h4 {
    font-size: 24px;
    line-height: 24px;
  }
  .apple-name-form-form form {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .apple-name-form-form form :last-child {
    grid-column: span 1;
  }
  .apple-name-form-actions {
    flex-direction: column;
    gap: 12px;
  }
  .apple-name-form-back-button,
  .apple-name-form-submit-button {
    width: 100%;
    min-width: unset;
  }
}
.choose-favorite-store-section {
  padding: 24px 40px;
  height: 428px;
  overflow: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.choose-favorite-store-header {
  margin-bottom: 16px;
}
.choose-favorite-store-section h4 {
  font-size: 32px;
  line-height: 32px;
}
.choose-favorite-store-section .choose-favorite-store-description {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
}
.choose-favorite-store-section .clear-button {
  margin-right: 8px;
}
.search-container {
  margin-bottom: 12px;
  position: relative;
}
.store-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.store-item--selected {
  border: 1px solid var(--color-red-500);
}
.store-info {
  flex: 1;
}
.store-info .store-name {
  margin-bottom: 4px;
}
.store-info .store-address {
  font-size: 14px;
  line-height: 20px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
}
.store-distance {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}
.no-results {
  text-align: center;
  padding: 24px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.no-results p {
  margin: 0;
  font-size: 16px;
}
.search-results-dropdown {
  border: 0.5px solid var(--color-black);
  border-top: none;
  box-shadow: 0 4px 4px #00000040;
  position: relative;
  top: -20px;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: var(--color-white);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .choose-favorite-store-section {
    padding: 16px;
    height: 380px;
  }
  .choose-favorite-store-section h4 {
    font-size: 24px;
    line-height: 24px;
  }
  .choose-favorite-store-header {
    margin-bottom: 12px;
  }
}
.profile-modal-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background-color: #0000;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  transition: background-color 0.3s ease-in-out;
}
.profile-modal-overlay.profile-modal-overlay-open {
  background-color: #00000080;
}
.profile-modal {
  background: var(--color-white);
  width: 100%;
  max-width: 420px;
  height: 100%;
  overflow-y: auto;
  transform: translate(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
  padding-bottom: 157px;
}
.profile-modal.profile-modal-open {
  transform: translate(0);
}
.profile-modal.profile-modal-closing {
  transform: translate(100%);
  transition: transform 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.profile-modal-header {
  padding: 16px;
  position: relative;
  margin-top: 12px;
  border-bottom: 1px solid var(--color-neutrals-100);
}
.profile-modal-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.profile-reward-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.profile-reward-wrapper-content {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: column;
  position: relative;
  z-index: 2;
}
.profile-reward-wrapper-content svg {
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.profile-reward-wrapper-content-nextline {
  display: flex;
  gap: 2px;
}
.profile-reward-wrapper h1 {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-red-500);
}
.profile-reward-wrapper span {
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  font-size: 24px;
  transform: rotate(-4deg);
  display: block;
  line-height: 22px;
}
.profile-reward-wrapper p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
  font-size: 12px;
}
.profile-modal-header h4 {
  font-size: 24px;
  line-height: 24px;
  color: var(--color-neutrals-600);
}
.profile-modal-header h4 span {
  font-family: var(--font-hollie-script);
}
.profile-modal-header p {
  font-size: 14px;
  line-height: 20px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
}
.profile-modal-character-logo {
  width: 61px;
  height: 95px;
  color: var(--color-neutrals-500);
  position: absolute;
  right: 17%;
  bottom: 0;
  z-index: 1;
}
.profile-modal-close-button {
  background: var(--color-white);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-neutrals-800);
  padding: 0;
  border: 1px solid var(--color-neutrals-800);
  border-radius: 50%;
}
.profile-modal-close-button:hover {
  background: var(--color-neutrals-800);
  border-color: var(--color-neutrals-800);
  color: var(--color-white);
}
.wallet-btn-container {
  display: flex;
  padding: 0 24px;
  margin: 16px 0;
}
.wallet-btn {
  background: transparent;
  padding: 0;
  height: 32px;
  border: unset;
  border-radius: unset;
}
.wallet-btn:hover {
  background: transparent;
  border: unset;
}
.profile-modal-earn-free-point {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  background: var(--color-yellow-500);
  margin-top: 16px;
  margin-right: 14px;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 6px) 7.14%,
    100% 14.28%,
    calc(100% - 6px) 21.42%,
    100% 28.56%,
    calc(100% - 6px) 35.7%,
    100% 42.84%,
    calc(100% - 6px) 50%,
    100% 57.14%,
    calc(100% - 6px) 64.28%,
    100% 71.42%,
    calc(100% - 6px) 78.56%,
    100% 85.7%,
    calc(100% - 6px) 92.84%,
    100% 100%,
    0 100%
  );
}
.profile-modal-earn-free-point h3 {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-800);
}
.profile-modal-earn-free-point p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
  font-size: 12px;
}
.profile-modal-items {
  margin-top: 16px;
}
.profile-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 24px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.profile-modal-item:hover {
  background-color: var(--color-neutrals-100);
}
.profile-modal-item-icon {
  width: 32px;
  height: 32px;
  color: var(--color-red-500);
}
.profile-modal-item-content .profile-modal-item-title {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-600);
}
.profile-modal-item-content .profile-modal-item-description {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
  font-size: 12px;
}
.profile-modal-item-end {
  margin-left: auto;
  margin-right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-modal-receipt {
  padding: 12px 24px;
}
.barcode-btn {
  gap: 8px;
  width: 100%;
}
.profile-modal-footer {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-link {
  color: var(--color-neutrals-800);
  text-decoration: underline;
  font-size: 16px;
  transition: color 0.2s ease-in-out;
  cursor: pointer;
  font-family: var(--font-myriad-pro-black-condensed);
}
.footer-link:hover {
  color: var(--color-red-500);
  background: transparent;
}
.footer-link-button {
  padding: 0;
  background: transparent;
  text-align: left;
  border: none;
}
@media screen and (max-width: 768px) {
  .profile-modal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
  }
  .profile-modal {
    width: 100%;
    padding-bottom: 32px;
  }
}
.scan-modal .fav-modal-container {
  gap: 20px;
}
.scan-modal-note {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.horizontal-or-line {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
}
.horizontal-or-line span {
  flex: 1;
  border: 1px solid var(--color-neutrals-300);
}
.scan-modal-input-container,
.scan-modal-input-container-mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.scan-modal-input-container-mobile h5 {
  font-size: 24px;
  line-height: 24px;
  color: var(--color-neutrals-800);
}
.confirm-barcode-modal .congratulations-modal-content p {
  max-width: unset;
}
.barcode-invalid-modal-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.barcode-invalid-modal-content h1 {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-neutrals-800);
}
.barcode-invalid-modal-content p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
@media (max-width: 768px) {
  .scan-modal .fav-modal-header h3 {
    font-size: 40px;
    line-height: 40px;
  }
  .scan-modal .fav-modal-header p {
    font-size: 16px;
    line-height: 24px;
  }
  .barcode-invalid-modal-content {
    padding: 24px 16px;
  }
}
.barcode-scanner-modal {
  z-index: 9999;
}
.barcode-scanner-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  max-width: 400px;
  width: 100%;
}
.barcode-scanner-header {
  text-align: center;
}
.barcode-scanner-header h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
}
.barcode-scanner-header p {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}
.barcode-scanner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.scanner-loading,
.scanner-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}
.scanner-loading p,
.scanner-error p {
  margin: 0;
  color: #666;
}
.scanner-camera {
  position: relative;
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}
.scanner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.scanner-frame {
  width: 200px;
  height: 100px;
  border: 2px solid #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 9999px #00000080;
  position: relative;
}
.scanner-frame:before,
.scanner-frame:after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid #00ff00;
}
.scanner-frame:before {
  top: -3px;
  left: -3px;
  border-right: none;
  border-bottom: none;
}
.scanner-frame:after {
  bottom: -3px;
  right: -3px;
  border-left: none;
  border-top: none;
}
.barcode-scanner-footer {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 768px) {
  .barcode-scanner-container {
    padding: 1rem;
    max-width: 100%;
  }
  .scanner-camera {
    max-width: 100%;
  }
  .scanner-frame {
    width: 250px;
    height: 120px;
  }
}
.barcode-scanner-content > div > div {
  width: 100% !important;
  height: 300px !important;
}
.barcode-scanner-content video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 8px;
}
.location-details-panel {
  width: 100%;
  overflow-y: auto;
}
.location-details-panel::-webkit-scrollbar {
  width: 0;
}
.location-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 40px;
  border-bottom: 1px solid var(--color-neutrals-100);
  width: 100%;
}
.location-details-prev-button {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: transparent;
  padding: 0;
  border: none;
  cursor: pointer;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 16px;
  line-height: 24px;
}
.location-details-prev-button:hover {
  background-color: transparent;
}
.location-details-content {
  padding: 40px;
}
.location-details-content .location-modal-card-info-address,
.location-details-content .copy-address-button {
  color: var(--color-neutrals-500);
}
.location-details-content .divider {
  border-bottom: 1px dashed var(--color-neutrals-100);
  margin: 24px 0;
}
.location-details-content-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.location-details-content-action-buttons button {
  font-size: 16px;
  line-height: 24px;
  gap: 8px;
  width: 100%;
}
.location-details-content-action-buttons .flex-item-center {
  gap: 8px;
}
.location-schedule-header,
.location-hour {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.location-hour p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-500);
}
.location-schedule-header {
  margin-top: 16px;
}
.location-schedule-loading {
  padding: 24px 0;
  text-align: center;
}
.location-schedule-loading p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-neutrals-400);
}
@media screen and (max-width: 768px) {
  .location-details-content {
    padding: 16px;
  }
  .location-details-content .divider {
    margin: 16px 0;
  }
  .location-schedule-header h2 {
    font-size: 20px;
    line-height: 20px;
  }
  .location-hour p {
    font-size: 16px;
  }
}
.location-modal-content {
  display: flex;
  height: 100%;
}
.location-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 34.38%;
}
.location-tab-container {
  width: 100%;
  padding: 24px 40px;
  border-bottom: 1px solid var(--color-neutrals-200);
}
.location-tab {
  border: 1px solid var(--color-neutrals-200);
  background-color: var(--color-white);
  padding: 4px;
  border-radius: 100px;
  min-width: 263px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.location-tab .tab-button {
  transition: all 0.2s ease !important;
}
.location-tab .tab-button.active {
  background-color: var(--color-neutrals-800);
  color: var(--color-white);
}
.location-title {
  font-size: 28px;
  line-height: 28px;
  color: var(--color-neutrals-800);
}
.location-search-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 40px 0;
  width: 100%;
}
.location-search {
  width: 100%;
  position: relative;
}
.location-search-container .location-search .input-container .helper-text {
  font-size: 16px;
  padding-top: 6px;
}
.location-search .loading-spinner {
  margin: 0;
}
.location-search-wrapper .delivery-text {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 14px;
  line-height: 16px;
  max-width: 277px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-top: 10px;
}
.search-location-list {
  border: 0.5px solid var(--color-black);
  border-top: none;
  box-shadow: 0 4px 4px #00000040;
  position: absolute;
  top: calc(100% - 18px);
  left: 0;
  right: 0;
  z-index: 999;
  background-color: var(--color-white);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
}
.location-search-item {
  padding: 12px;
  cursor: pointer;
  color: var(--color-neutrals-800);
  display: flex;
  align-items: center;
  gap: 4px;
}
.location-search-item p {
  font-size: 14px;
}
.location-search-item:hover {
  background-color: var(--color-neutrals-100);
}
.search-results-dropdown {
  border: 0.5px solid var(--color-black);
  border-top: none;
  box-shadow: 0 4px 4px #00000040;
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: var(--color-white);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
  overflow: hidden;
}
.search-result-item {
  padding: 12px;
  cursor: pointer;
  color: var(--color-neutrals-800);
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}
.search-result-item:hover {
  background-color: var(--color-neutrals-100);
}
.search-result-item:focus,
.search-result-item.active-descendant {
  outline: 2px solid var(--color-primary-500);
  outline-offset: -2px;
  background-color: var(--color-neutrals-100);
}
.search-result-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.search-result-main {
  font-weight: 500;
  color: var(--color-neutrals-800);
}
.search-result-secondary {
  font-size: 12px;
  color: var(--color-neutrals-600);
}
.location-auth-buttons {
  width: 100%;
}
.auth-buttons-container {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  margin-top: 8px;
}
.auth-buttons-container button {
  width: 100%;
  font-size: 14px;
  line-height: 18px;
  padding: 8px 16px;
}
.digital-ordering-info {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
  display: flex;
  align-items: center;
  gap: 4px;
}
.location-footer {
  width: 100%;
  margin-top: auto;
  padding: 24px 40px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  position: relative;
}
.location-footer-close-button {
  position: absolute;
  top: -24px;
  right: 16px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  margin: 0;
}
.all-locations {
  overflow-y: auto;
}
.all-locations::-webkit-scrollbar {
  width: 0;
}
.map-view {
  flex: 1;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.map-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 9;
}
.all-locations {
  width: 100%;
  padding: 0 40px;
}
.location-header {
  margin: 12px 0;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--color-white);
}
.location-header h2 {
  color: var(--color-neutrals-800);
  text-align: start;
}
.saved-addresses .location-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.saved-addresses .location-header svg {
  transition: transform 0.3s ease;
}
.saved-addresses.collapse {
  padding-bottom: 0;
}
.saved-addresses.collapse .location-header svg {
  transform: rotate(180deg);
}
.saved-addresses.collapse .location-list {
  height: 0;
  margin: 0;
}
.location-modal-card {
  padding: 12px 16px;
  cursor: pointer;
  background-color: var(--color-white);
  transition: all 0.3s ease;
  border-radius: 16px;
  border: 1px solid transparent;
}
.location-modal-card:hover,
.location-modal-card.hovered {
  border-color: var(--color-red-500);
  margin-bottom: 16px;
}
.location-modal-card .action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 12px;
}
.location-modal-card .action-buttons button {
  width: 100%;
  font-size: 14px;
  line-height: 18px;
  padding: 8px 16px;
}
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.location-modal-card p {
  color: var(--color-neutrals-800);
}
.location-modal-card-info-name {
  font-size: 16px;
  line-height: 18px;
}
.location-modal-card-info-address {
  color: var(--color-neutrals-500);
  font-size: 14px;
  line-height: 20px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.location-modal-card-favorite,
.copy-address-button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  border-radius: unset;
}
.copy-address-button {
  color: var(--color-neutrals-500);
}
.location-modal-card-favorite:hover,
.copy-address-button:hover {
  background-color: transparent;
}
.location-modal-card-favorite .heart-icon {
  color: var(--color-red-500);
}
.location-modal-card-favorite .heart-outline-icon {
  color: var(--color-neutrals-800);
}
.location-modal-card-info {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.location-modal-card-info.status-info {
  justify-content: space-between;
}
.location-modal-card-info-mileage {
  color: var(--color-neutrals-800);
  font-size: 14px;
  line-height: 20px;
  margin-left: auto;
}
.location-modal-card-badge {
  font-size: 12px;
  line-height: 16px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  padding: 8px 20px;
  border-radius: 100px;
  background-color: var(--color-green-50);
  color: var(--color-green-500);
}
.location-modal-card-badge.unavailable,
.location-modal-card-badge.closed {
  background-color: var(--color-neutrals-800);
  color: var(--color-neutrals-100);
}
.location-modal-card-badge.coming-soon {
  background-color: var(--color-blue-500);
  color: var(--color-neutrals-100);
}
.delivery-unavailable {
  padding: 16px;
  border: 1px solid var(--color-red-800);
  border-radius: 16px;
  margin: 24px 40px 16px;
}
.delivery-unavailable .attention-text {
  color: var(--color-red-800);
  margin-bottom: 8px;
}
.delivery-unavailable .attention-text h5 {
  font-size: 20px;
  line-height: 20px;
}
.delivery-unavailable p {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.delivery-unavailable button {
  width: 100%;
  margin-top: 20px;
  font-size: 14px;
  line-height: 18px;
  padding: 8px 16px;
}
.location-search .delivery-text {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  margin-top: 8px;
}
.location-icon-button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-neutrals-800);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.location-icon-button:hover {
  opacity: 0.7;
  background: transparent;
}
.location-icon-button:focus {
  outline: none;
  opacity: 0.7;
}
.location-icon-button.active {
  color: #4285f4;
}
.location-icon-button.active svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
.location-icon-button svg {
  width: 20px;
  height: 20px;
}
.location-search .loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-neutrals-200);
  border-top: 2px solid var(--color-neutrals-800);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  .location-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
  }
  .location-tab-container,
  .location-search-container {
    padding: 16px;
    align-items: flex-start;
    flex-shrink: 0;
  }
  .location-search-container {
    gap: 8px;
    padding-bottom: 0;
  }
  .location-title {
    font-size: 24px;
    line-height: 24px;
  }
  .all-locations {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 40px;
    min-height: 0;
    overscroll-behavior: contain;
  }
  .location-header {
    margin-top: 0;
    margin-bottom: 0;
  }
  .location-search-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
  .location-search-wrapper .delivery-text {
    max-width: unset;
  }
  .location-footer {
    padding: 24px 16px;
  }
  .flex-between svg {
    flex-shrink: 0;
  }
  .delivery-unavailable {
    margin: 20px 16px;
  }
}
.search-prompt-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-neutrals-600);
}
.search-prompt-placeholder p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
}
.search-prompt-placeholder p:last-child {
  margin-bottom: 0;
  font-size: 14px;
  color: var(--color-neutrals-500);
}
.location-list .address-card {
  margin-bottom: 16px;
}
.location-list {
  margin-top: 1.5rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}
.mobile-location-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}
.mobile-location-modal--opening {
  animation: mobileModalSlideUp 0.3s ease-out;
}
.mobile-location-modal--closing {
  animation: mobileModalSlideDown 0.3s ease-in;
}
.mobile-location-map {
  position: relative;
}
.mobile-location-map .modal-close-button {
  position: absolute;
  top: 16px;
  left: 16px;
  margin: 0;
}
.mobile-location-drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: grab;
  z-index: 10;
  background: var(--color-white);
  border-radius: 16px 16px 0 0;
  margin-top: -16px;
  height: 20px;
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
.mobile-location-drag-handle:active {
  cursor: grabbing;
}
.drag-handle-bar {
  width: 72px;
  height: 6px;
  background: var(--color-neutrals-300);
  transition: background-color 0.2s ease;
  border-radius: 20px;
}
.mobile-location-content {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.mobile-location-content .location-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.mobile-location-content .location-tab-container,
.mobile-location-content .location-search-container {
  flex-shrink: 0;
}
.mobile-location-content .all-locations {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
@keyframes mobileModalSlideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes mobileModalSlideDown {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}
@media (max-height: 400px) {
  .mobile-location-modal .location-container {
    overflow: auto;
    display: block;
  }
}
@font-face {
  font-family: Sink;
  src: url(/assets/SinkRegular-Cynsv88G.otf) format('opentype');
}
@font-face {
  font-family: Myriad Pro Black Condensed;
  src:
    url(/assets/myriadpro-blackcond-webfont-DhyZFvIC.woff2) format('woff2'),
    url(/assets/myriadpro-blackcond-webfont-AJoQq8Uz.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Myriad Pro SemiBold Condensed;
  src:
    url(/assets/myriadpro-semiboldcond-webfont-CtR3p05y.woff2) format('woff2'),
    url(/assets/myriadpro-semiboldcond-webfont-BvbPTD1j.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: Hollie Script;
  src: url(/assets/hollie-script-pro-JBnkEa94.otf) format('opentype');
  font-weight: 400;
  font-style: normal;
}
:root {
  --font-sink: 'Sink', system-ui, sans-serif;
  --font-myriad-pro-black-condensed: 'Myriad Pro Black Condensed', system-ui,
    sans-serif;
  --font-myriad-pro-semibold-condensed: 'Myriad Pro SemiBold Condensed',
    system-ui, sans-serif;
  --font-hollie-script: 'Hollie Script', system-ui, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-sink);
}
p,
span {
  margin: 0;
  font-family: var(--font-myriad-pro-black-condensed);
}
:root {
  --color-neutrals-100: #f0f0f0;
  --color-neutrals-200: #d8d8d8;
  --color-neutrals-300: #b1b1b1;
  --color-neutrals-400: #767676;
  --color-neutrals-500: #636363;
  --color-neutrals-600: #3c3c3c;
  --color-neutrals-700: #303030;
  --color-neutrals-800: #231f20;
  --color-red-50: #ffe5e5;
  --color-red-100: #ffcccc;
  --color-red-300: #ff6667;
  --color-red-400: #ff3638;
  --color-red-500: #ee0002;
  --color-red-600: #cc0002;
  --color-red-700: #990001;
  --color-red-800: #660001;
  --color-yellow-50: #fffbf4;
  --color-yellow-100: #fff6e8;
  --color-yellow-300: #fee5ba;
  --color-yellow-400: #fedca3;
  --color-yellow-500: #fed38c;
  --color-yellow-600: #cba970;
  --color-blue-50: #f6f7ff;
  --color-blue-100: #d9defc;
  --color-blue-400: #667bf1;
  --color-blue-500: #405aee;
  --color-blue-600: #3348be;
  --color-blue-700: #26368f;
  --color-white: #ffffff;
  --color-green-50: #e5f0f1;
  --color-green-400: #33898a;
  --color-green-500: #006b6d;
  --color-green-600: #005657;
  color: var(--color-neutrals-600);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
button:focus {
  outline: none;
}
button:focus-visible {
  transition: none;
  outline: 4px auto -webkit-focus-ring-color !important;
  outline-offset: 2px !important;
}
@media (prefers-color-scheme: dark) {
  .fresh-design-container {
    background: var(--color-white);
  }
}
.notification-banner {
  width: calc(100% - 80px);
  margin-left: auto;
  margin-right: auto;
}
.notification-banner-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-yellow-500);
  height: 40px;
  padding: 0 28px;
  clip-path: polygon(
    6px 0,
    100% 0,
    calc(100% - 6px) 12.5%,
    100% 25%,
    calc(100% - 6px) 37.5%,
    100% 50%,
    calc(100% - 6px) 62.5%,
    100% 75%,
    calc(100% - 6px) 87.5%,
    100% 100%,
    0 100%,
    6px 87.5%,
    0 75%,
    6px 62.5%,
    0 50%,
    6px 37.5%,
    0 25%,
    6px 12.5%,
    0 0
  );
}
.notification-banner-center-content {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 8px;
}
.notification-banner-center-content h3 {
  font-size: 20px;
  line-height: 15px;
  color: var(--color-neutrals-600);
}
.notification-banner-center-content h3 span {
  font-family: var(--font-sink);
  color: var(--color-red-500);
  margin-right: 2px;
}
.notification-banner-center-content p {
  font-size: 12px;
  line-height: 12px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.notification-banner-right-arrow {
  position: absolute;
  right: 28px;
  cursor: pointer;
}
.font-s {
  font-size: 14px !important;
  margin-bottom: 3px;
}
.notification-banner-center-content p span {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 10px;
  vertical-align: text-top;
}
.fresh-design-container {
  min-height: 100dvh;
}
.bag-count-button {
  gap: 8px;
}
.bag-count-button .bag-count-number {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.bag-count-number .bag-count {
  position: absolute;
  font-size: 14px;
  line-height: 16px;
  color: var(--color-red-500);
  bottom: 2px;
  margin-right: 3px;
}
.bag-count-button.shake {
  animation: shakeCart 0.4s ease-in-out forwards;
}
@keyframes shakeCart {
  25% {
    transform: translate(6px);
  }
  50% {
    transform: translate(-4px);
  }
  75% {
    transform: translate(2px);
  }
  to {
    transform: translate(0);
  }
}
.cart-item.flying {
  height: 24px;
  width: 24px;
  z-index: 99999;
  pointer-events: none;
  position: fixed;
}
.cart-item.flying:before {
  content: attr(data-quantity);
  display: block;
  line-height: 24px;
  height: 24px;
  width: 24px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-red-500);
  color: var(--color-white);
  border-radius: 20px;
  text-align: center;
}
.cart-item.flying.animate {
  animation: xAxis 1s forwards cubic-bezier(1, 0.44, 0.84, 0.165);
}
.cart-item.flying.animate:before {
  animation: yAxis 1s alternate forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes xAxis {
  to {
    transform: translate(var(--delta-x, 0));
  }
}
@keyframes yAxis {
  to {
    transform: translateY(var(--delta-y, 0));
  }
}
.offer-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  cursor: pointer;
  white-space: nowrap;
}
.offer-container .offer-title {
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-red-500);
  transition: transform 0.35s ease-in-out;
  font-family: var(--font-sink);
}
.offer-container:hover .offer-title {
  transform: scale(1.1);
}
.offer-container .flex-item-center {
  gap: 8px;
}
.offer-container .offer-description {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.2px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-transform: uppercase;
}
.offer-container .offer-description.tooltip-show {
  display: flex;
  align-items: center;
  gap: 4px;
}
.offer-container .offer-description sup {
  line-height: 14px;
  font-size: 12px;
}
.offer-container .flex-item-center svg {
  animation: arrowBounce 2s ease-in-out infinite;
  width: 32px;
  height: 18px;
  color: var(--color-red-500);
}
@keyframes arrowBounce {
  0%,
  to {
    transform: translate(0);
  }
  50% {
    transform: translate(5px);
  }
}
.menu-badge {
  padding: 4px 12px;
  border-radius: 999px;
  width: max-content;
  font-size: 14px;
  line-height: 16px;
  color: var(--color-white);
  font-family: var(--font-myriad-pro-semibold-condensed);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.menu-badge-red {
  background-color: var(--color-red-600);
}
.menu-badge-green {
  background-color: var(--color-green-600);
}
.menu-badge-black {
  background-color: var(--color-neutrals-800);
}
.menu-badge-blue {
  background-color: var(--color-blue-500);
}
.menu-badge-light-red {
  background-color: var(--color-red-50);
  color: var(--color-red-700);
}
.menu-badge-light-green {
  background-color: var(--color-green-50);
  color: var(--color-green-600);
}
.menu-badge-light-blue {
  background-color: var(--color-blue-50);
  color: var(--color-blue-600);
}
.menu-badge-light-black {
  background-color: var(--color-neutrals-100);
  color: var(--color-neutrals-600);
}
.location-dropdown {
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  min-width: 520px;
  max-height: 80vh;
  overflow: hidden;
}
.component-dropdown {
  height: 100%;
  max-height: inherit;
}
.location-dropdown-close-button {
  background: var(--color-white);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-neutrals-800);
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
  margin-top: -16px;
  margin-right: -16px;
}
.location-dropdown-close-button:hover {
  background: var(--color-neutrals-100);
}
.location-dropdown-close-button:active {
  transform: scale(0.95);
}
.location-dropdown .input-wrapper,
.component-dropdown .input-wrapper {
  margin-top: 0;
}
.search-container {
  margin-bottom: 20px;
  position: relative;
}
.location-dropdown-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.back-button {
  color: var(--color-red-500);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-myriad-pro-semibold-condensed);
  transition: color 0.2s ease;
  margin-bottom: 15px;
}
.back-button:hover {
  color: var(--color-red-600);
}
.current-state {
  margin-top: 8px;
  font-size: 14px;
  color: var(--color-neutrals-600);
  font-weight: 500;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.locations-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 8px;
  animation: locationsSlideInFromBottom 0.5s ease-out 0.3s;
  animation-fill-mode: both;
  list-style: none;
}
.locations-grid::-webkit-scrollbar {
  width: 6px;
}
.locations-grid::-webkit-scrollbar-track {
  background: var(--color-neutrals-100);
  border-radius: 3px;
}
.locations-grid::-webkit-scrollbar-thumb {
  background: var(--color-neutrals-300);
  border-radius: 3px;
}
.locations-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutrals-400);
}
.location-item {
  display: flex;
  align-items: flex-start;
  gap: 0px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-white);
  min-width: 150px;
  border: 1px solid transparent;
  padding: 5px;
  position: relative;
  flex-direction: column;
  text-align: left;
  margin: 2px;
}
.location-item:hover {
  border: 1px solid var(--color-red-500);
  background: inherit;
}
.location-item .menu-badge {
  margin-top: 5px;
  padding: 4px 6px;
  font-size: 10px;
  line-height: 10px;
  text-transform: capitalize;
  font-family: var(--font-myriad-pro-black-condensed);
}
.location-info {
  display: flex;
  align-items: center;
  gap: 4px;
}
.location-info-address {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 2px;
}
.location-name {
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-black-condensed);
  margin-bottom: 2px;
  font-size: 16px;
  line-height: 18px;
}
.location-dropdown .location-name .component-dropdown .location-name {
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 16px;
  line-height: 18px;
}
.location-count {
  color: var(--color-neutrals-400);
}
.location-address {
  color: var(--color-neutrals-400);
  font-size: 12px;
  line-height: 16px;
  margin-top: 2px;
}
.no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--color-neutrals-500);
}
.no-results p {
  margin: 0;
}
.search-tip {
  margin-top: 8px !important;
  font-size: 12px !important;
  color: var(--color-neutrals-400) !important;
  font-style: italic;
}
.location-dropdown .location-unavailable,
.component-dropdown .location-unavailable {
  opacity: 0.7;
  cursor: not-allowed;
}
.location-dropdown-popover {
  position: absolute;
  z-index: 1000;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  max-height: 700px;
  overflow: hidden;
}
.location-dropdown-popover.open-below {
  animation: dropdownSlideDown 0.2s ease-out;
}
.location-dropdown-popover.open-above {
  animation: dropdownSlideUp 0.2s ease-out;
}
.location-dropdown .search-container .input-container,
.component-dropdown .search-container .input-container {
  animation: inputSlideInFromRight 0.5s ease-out 0.2s;
  animation-fill-mode: both;
}
@keyframes inputSlideInFromRight {
  0% {
    opacity: 0;
    transform: translate(50%);
  }
  to {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes locationsSlideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.location-dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00000080;
  z-index: 999;
  transition: opacity 0.3s ease;
}
.location-dropdown-overlay.fade-in {
  opacity: 1;
}
.location-dropdown-overlay.fade-out {
  opacity: 0;
}
@media (max-width: 1320px) {
  .locations-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    max-height: 280px;
  }
}
@media (max-width: 1200px) {
  .locations-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-height: 280px;
  }
}
@media (max-width: 1100px) {
  .locations-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-height: 280px;
  }
}
.location-selected-dropdown {
  background: var(--color-white);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  min-width: 260px;
}
.location-selected-dropdown-close-button {
  background: var(--color-white);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-neutrals-800);
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
  margin-top: -12px;
  margin-right: -12px;
}
.location-selected-dropdown-close-button:hover {
  background: var(--color-neutrals-100);
}
.location-selected-dropdown-close-button:active {
  transform: scale(0.95);
}
.location-delivery-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
}
.location-delivery-mode:hover {
  background-color: var(--color-neutrals-100);
}
.location-delivery-mode.active {
  background-color: var(--color-neutrals-200);
}
.location-delivery-mode-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.location-delivery-mode-text {
  color: var(--color-neutrals-600);
}
.location-selected-dropdown-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.location-selected-dropdown-buttons button {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 80px;
  border-bottom: 1px solid var(--color-neutrals-100);
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--color-white);
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.header-start-content {
  display: flex;
  align-items: center;
  gap: 24px;
}
.header-menu-icon {
  display: none;
  align-items: center;
  gap: 4px;
  font-family: var(--font-myriad-pro-black-condensed);
  cursor: pointer;
  color: var(--color-neutrals-600);
  padding: 0;
  background: transparent;
  border: none;
  font-size: 20px;
  margin-right: 16px;
}
.menu-dropdown-popover .header-actions {
  display: none;
}
.header-menu-icon:hover {
  color: var(--color-red-500);
  background: transparent;
}
.header-actions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.header-actions ul li {
  display: contents;
}
.header-actions ul button,
.header-actions ul a {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-myriad-pro-black-condensed);
  cursor: pointer;
  color: var(--color-neutrals-600);
  padding: 0;
  background: transparent;
  border: none;
  font-size: 20px;
  margin-right: 16px;
  text-decoration: none;
}
.header-actions ul button:hover,
.header-actions ul button.active,
.header-actions ul a:hover,
.header-actions ul a.active {
  color: var(--color-red-500);
}
.header-actions ul button svg {
  transition: transform 0.2s ease;
}
.header-actions ul button .chevron-rotated {
  transform: rotate(180deg);
}
.header-actions ul button.dropdown-open {
  color: var(--color-red-500);
}
.header-end-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-end-button {
  min-width: 160px !important;
}
.order-button {
  padding: 12px 34px;
}
.header-end-content-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  cursor: pointer;
}
.selected-location {
  max-width: 200px;
  cursor: pointer;
}
.end-content-title {
  font-size: 14px;
  line-height: 20px;
}
.header-inbox-badge-wrapper {
  width: max-content;
  position: relative;
}
.header-inbox-badge-wrapper .unread-message-badge {
  position: absolute;
  top: -6px;
  right: -22px;
  width: 20px;
  height: 20px;
  font-size: 14px;
}
.selected-location-address {
  font-size: 12px;
  line-height: 14px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.selected-location-address span {
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.header-selected-location-wrapper {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 320px;
}
.selected-location-icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.selected-location-delivery-mode {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-600);
}
.selected-location-time-text {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.selected-location-restaurant-name {
  font-size: 14px;
  line-height: 16px;
  color: var(--color-neutrals-600);
}
.vertical-separator-line {
  width: 1px;
  background: var(--color-neutrals-100);
}
.selected-location-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rewards {
  display: flex;
  align-items: center;
  width: max-content;
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 14px;
  line-height: 20px;
}
.rewards span {
  color: var(--color-red-500);
  margin: 0 4px;
  font-size: 15px;
}
.rewards svg {
  cursor: pointer;
}
.flex-item-center {
  display: flex;
  align-items: center;
}
.offer-end .offer-title {
  line-height: 24px;
  font-size: 32px;
}
.offer-end .flex-item-center {
  margin-left: 6px;
  gap: 12px;
}
.offer-end .offer-description {
  line-height: 20px;
  font-size: 20px;
}
.header-avatar-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue-50);
  color: var(--color-blue-500);
}
.tooltip-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 4px;
}
@media screen and (max-width: 1420px) {
  .header-actions {
    display: none;
  }
  .header-menu-icon,
  .menu-dropdown-popover .header-actions {
    display: block;
  }
}
@media screen and (max-width: 1150px) {
  .header {
    padding: 14px 20px;
  }
}
@media screen and (max-width: 1024px) {
  .header-start-content,
  .header .header-end-content {
    gap: 8px;
  }
  .header-menu-icon {
    margin-right: 8px;
  }
  .header .header-selected-location-wrapper {
    gap: 4px;
  }
  .header .header-end-content .button--medium {
    padding: 8px 12px;
    font-size: 18px;
  }
  .header .offer-container .flex-item-center svg {
    width: 24px;
  }
  .header .offer-end .offer-title {
    font-size: 24px;
  }
  .header .offer-end .offer-description {
    line-height: 16px;
    font-size: 16px;
  }
  .header .offer-end .flex-item-center {
    margin-left: 0;
    gap: 8px;
  }
}
@media screen and (max-width: 880px) {
  .header .header-start-content a img {
    width: 120px;
  }
  .header .vertical-separator-line {
    flex-shrink: 0;
  }
  .header .header-end-content {
    gap: 4px;
  }
}
.menu-dropdown {
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  min-width: 520px;
  max-height: 80vh;
  overflow: hidden;
}
.menu-dropdown-close-button {
  background: var(--color-white);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-neutrals-800);
  padding: 0;
  flex-shrink: 0;
  margin-left: auto;
  margin-top: -16px;
  margin-right: -16px;
}
.menu-dropdown-close-button:hover {
  background: var(--color-neutrals-100);
}
.menu-dropdown-close-button:active {
  transform: scale(0.95);
}
.menu-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-height: 300px;
  overflow-y: auto;
  padding-right: 8px;
  animation: menuSlideInFromBottom 0.5s ease-out;
}
.menu-category-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-white);
  min-width: 200px;
  margin-bottom: 8px;
}
.menu-category-item:hover .category-name,
.menu-category-item:hover .category-count {
  color: var(--color-red-500);
}
.category-icon {
  font-size: 24px;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.category-info {
  display: flex;
  align-items: center;
  gap: 4px;
}
.category-name {
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-black-condensed);
  margin-bottom: 2px;
  white-space: nowrap;
}
.category-count {
  color: var(--color-neutrals-300);
}
.loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--color-neutrals-500);
}
.loading p {
  margin: 0;
}
.no-categories {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--color-neutrals-500);
}
.no-categories p {
  margin: 0;
}
.menu-dropdown-popover {
  position: absolute;
  z-index: 9999;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  max-height: 500px;
  overflow: hidden;
}
.menu-dropdown-popover.open-below {
  animation: dropdownSlideDown 0.2s ease-out;
}
.menu-dropdown-popover.open-above {
  animation: dropdownSlideUp 0.2s ease-out;
}
@keyframes menuSlideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dropdownSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes dropdownSlideUp {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1100px) {
  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 280px;
  }
}
@media (max-width: 950px) {
  .menu-categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-height: 280px;
  }
}
.header-menu-dropdown {
  overflow: hidden;
}
.header-menu-dropdown-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-banner-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-height: calc(100vh - 120px);
  overflow: hidden;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-content-container {
  padding: 40px;
  width: calc(100% - 80px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 9;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.top-banner-swiper .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-banner-swiper .swiper-bullet {
  padding: 0;
  background-color: transparent;
  width: 24px;
  height: 24px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.top-banner-container .top-banner-swiper .swiper-pagination-bullets {
  background: #f3f3f3;
  width: max-content;
  left: 50%;
  transform: translate(-50%);
  border-radius: 16px;
}
.top-banner-swiper .swiper-bullet span {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 25px;
  margin: 0 7px;
  background: #8c8c8c;
  transition: all 0.3s ease;
}
.top-banner-swiper .swiper-bullet-active {
  width: 60px;
}
.top-banner-swiper .swiper-bullet-active span {
  background-color: var(--color-neutrals-600);
  width: 40px;
}
.top-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 9;
}
.effect-bg {
  box-shadow: 4px 4px 12px #fff3 inset;
  filter: drop-shadow(4px 4px 16px rgba(0, 0, 0, 0.08));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-repeat: no-repeat;
  background-size: cover;
  background: var(--color-white);
}
.glass-effect {
  box-shadow: 4px 4px 12px #fff3 inset;
  filter: drop-shadow(4px 4px 16px rgba(0, 0, 0, 0.08));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-image: url("data:image/svg+xml,%3csvg%20width='441'%20height='80'%20viewBox='0%200%20441%2080'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_n_10_577)'%3e%3crect%20width='441'%20height='80'%20rx='0'%20fill='white'%20fill-opacity='0.2'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_n_10_577'%20x='0'%20y='0'%20width='441'%20height='80'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeTurbulence%20type='fractalNoise'%20baseFrequency='5%205'%20stitchTiles='stitch'%20numOctaves='3'%20result='noise'%20seed='1393'%20/%3e%3cfeColorMatrix%20in='noise'%20type='luminanceToAlpha'%20result='alphaNoise'%20/%3e%3cfeComponentTransfer%20in='alphaNoise'%20result='coloredNoise1'%3e%3cfeFuncA%20type='discrete'%20tableValues='1%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%201%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%20'/%3e%3c/feComponentTransfer%3e%3cfeComposite%20operator='in'%20in2='shape'%20in='coloredNoise1'%20result='noise1Clipped'%20/%3e%3cfeFlood%20flood-color='rgba(0,%200,%200,%200.1)'%20result='color1Flood'%20/%3e%3cfeComposite%20operator='in'%20in2='noise1Clipped'%20in='color1Flood'%20result='color1'%20/%3e%3cfeMerge%20result='effect1_noise_10_577'%3e%3cfeMergeNode%20in='shape'%20/%3e%3cfeMergeNode%20in='color1'%20/%3e%3c/feMerge%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: cover;
}
.top-banner-container h2 {
  color: var(--color-neutrals-800);
  text-align: center;
  padding-bottom: 10px;
}
.video-content-container .banner-action-buttons h2 {
  text-align: left;
  font-size: clamp(18px, 2.2vw, 30px);
}
.video-content-container .banner-action-buttons h2 svg {
  color: var(--color-red-500);
  vertical-align: text-bottom;
}
.banner-action-buttons {
  display: flex;
  flex-direction: column;
  padding: 1.5%;
  border-radius: 16px;
  z-index: 9;
  width: 33%;
  max-width: 450px;
  max-height: 250px;
  min-width: 250px;
  box-sizing: border-box;
  font-size: 1em;
}
.banner-action-buttons button {
  gap: 4px;
  font-size: clamp(12px, 1.7vw, 20px);
  padding: clamp(6px, 1vw, 12px) clamp(10px, 2vw, 20px);
  height: clamp(24px, 6vh, 48px);
}
.banner-action-buttons svg {
  width: 1em;
  height: 1em;
}
.banner-action-buttons .flex-item-center {
  gap: clamp(8px, 1vw, 12px);
  margin-top: clamp(8px, 1vw, 16px);
}
.banner-action-buttons .flex-item-center button {
  width: 100%;
  min-width: unset;
}
.earn-free-point {
  background-color: #0000001a;
  padding: 16px;
  border-radius: 16px;
  color: var(--color-white);
  cursor: pointer;
}
.white-bg {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border-radius: 8px;
  gap: 8px;
  padding: 12px 16px 12px 8px;
}
.earn-free-point h3 {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-800);
}
.earn-free-point p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
}
.video-play-button button {
  background-color: var(--color-white);
  border: none;
  cursor: pointer;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--color-neutrals-800);
  display: flex;
  align-items: center;
  justify-content: center;
}
.join-now-banner {
  width: 100%;
  padding: 16px 8px;
  margin-top: 16px;
  border-top: 1px solid var(--color-neutrals-100);
  border-bottom: 1px solid var(--color-neutrals-100);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.join-now-banner h3 {
  text-transform: uppercase;
  font-size: 20px;
  line-height: 20px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.join-now-banner button {
  font-size: 16px;
  line-height: 24px;
  padding: 10px;
}
@media (max-width: 768px) {
  .video-content-container {
    aspect-ratio: unset;
  }
}
@media (max-height: 780px) {
  .top-banner-container {
    max-height: unset;
  }
}
@font-face {
  font-family: swiper-icons;
  src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translateZ(0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper:before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper:before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: #00000026;
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, #00000080, #0000);
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, #00000080, #0000);
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, #00000080, #0000);
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, #00000080, #0000);
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translateZ(0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(
    --swiper-pagination-bullet-width,
    var(--swiper-pagination-bullet-size, 8px)
  );
  height: var(
    --swiper-pagination-bullet-height,
    var(--swiper-pagination-bullet-size, 8px)
  );
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  display: inline-block;
  transition:
    0.2s transform,
    0.2s top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translate(-50%);
  white-space: nowrap;
}
.swiper-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  transition:
    0.2s transform,
    0.2s left;
}
.swiper-horizontal.swiper-rtl
  > .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  transition:
    0.2s transform,
    0.2s right;
}
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
.swiper-pagination-progressbar {
  background: var(
    --swiper-pagination-progressbar-bg-color,
    rgba(0, 0, 0, 0.25)
  );
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}
.reward-banner-container {
  position: relative;
  padding: 0 clamp(20px, 4vw, 80px);
  margin-top: 16px;
}
.reward-banner-content {
  display: flex;
  align-items: center;
  gap: clamp(24px, 6vw, 106px);
  padding: 40px 0;
}
.reward-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 400px;
  max-width: 780px;
}
.reward-banner-right-content-info {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 32px);
}
.reward-banner-right-content-info button {
  max-width: 519px;
}
.reward-banner-content-text {
  font-size: clamp(32px, 4vw, 64px);
  line-height: clamp(32px, 4vw, 64px);
  position: relative;
  color: var(--color-neutrals-800);
}
.reward-banner-content-text sup {
  font-size: clamp(20px, 2vw, 32px);
  line-height: clamp(20px, 2vw, 32px);
}
.reward-banner-content-text span {
  font-size: clamp(20px, 2.5vw, 40px);
  line-height: clamp(20px, 2.5vw, 40px);
  position: absolute;
  top: 0;
  left: 5.3em;
  max-width: 5em;
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  transform: rotate(-4deg);
}
.privacy-policy-text {
  font-size: 14px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
  margin-top: 16px;
  max-width: 780px;
}
.privacy-policy-text a {
  color: var(--color-neutrals-600);
}
.privacy-policy-text a:hover {
  color: var(--color-red-500);
}
.reward-banner-auth-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}
.reward-banner-auth-buttons button {
  flex: 1;
}
@media (max-width: 768px) {
  .reward-banner-content-text span {
    font-size: 24px;
    line-height: 24px;
    left: 5.3em;
  }
}
.menu-card-section-container {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}
.menu-card-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32px 0;
}
.menu-card-section-header h2 {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-neutrals-800);
}
.menu-card-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.menu-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.menu-card-image {
  max-height: 400px;
  overflow: hidden;
  border-radius: 16px;
}
.menu-page .menu-card-image,
.menu-card-section-container .menu-card-image {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.menu-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.menu-card-content {
  display: flex;
  justify-content: space-between;
  gap: 48px;
}
.menu-card-content button {
  max-height: 48px;
}
.menu-card-content-promo {
  gap: 10px;
}
.menu-card-buttons {
  display: flex;
  gap: 10px;
}
.menu-card-content-info h3 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.menu-card-content-info p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
  line-height: 24px;
  margin-top: 12px;
}
.see-all-promotions {
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-neutrals-800);
  padding: 2px 8px;
}
.see-all-promotions:hover {
  background: transparent;
  color: var(--color-red-500);
  text-decoration: underline;
}
.mobile-show-more-btn {
  text-align: center;
  margin-top: 32px;
}
#promotions-news .menu-card-image img {
  object-fit: unset;
}
@media screen and (max-width: 768px) {
  .menu-card-section-container {
    padding: 0 16px;
  }
  .menu-card-section {
    grid-template-columns: 1fr;
  }
  .menu-card-section-header h2 {
    font-size: 40px;
    line-height: 40px;
  }
  .menu-card-image {
    height: auto;
  }
  .menu-card-content {
    flex-direction: column;
    gap: 24px;
  }
  .menu-card-content-info h3 {
    font-size: 28px;
    line-height: 28px;
  }
  .menu-card-buttons button {
    width: 100%;
  }
}
.catering-banner-container {
  max-width: calc(100% - 160px);
  margin: 80px auto 40px;
}
.catering-banner-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.catering-banner-image {
  flex: 1;
  width: 100%;
  height: 480px;
  overflow: hidden;
  border-radius: 16px;
}
.catering-banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catering-banner-left-content {
  flex: 1;
}
.catering-banner-left-content-info {
  padding-right: 100px;
}
.catering-banner-left-content button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.catering-banner-content-text {
  font-size: 64px;
  line-height: 64px;
  position: relative;
  color: var(--color-neutrals-800);
}
.catering-banner-content-text sup {
  font-size: 32px;
  line-height: 32px;
}
.catering-banner-content-text span {
  font-size: 40px;
  line-height: 40px;
  position: absolute;
  top: -42px;
  left: 0;
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  transform: rotate(-4deg);
}
.catering-banner-content-description {
  font-family: var(--font-myriad-pro-semibold-condensed);
  margin-bottom: 32px;
  margin-top: 16px;
}
@media screen and (max-width: 1040px) {
  .catering-banner-left-content-info {
    padding-right: 30px;
  }
}
@media screen and (max-width: 768px) {
  .catering-banner-container {
    max-width: 100%;
    padding: 16px;
    margin: 80px 0 0;
  }
  .catering-banner-content {
    flex-direction: column;
  }
  .catering-banner-left-content-info {
    padding-right: 0;
  }
  .catering-banner-content-text {
    font-size: 40px;
    line-height: 40px;
    max-width: calc(100% - 40px);
  }
  .catering-banner-content-text span {
    font-size: 32px;
    line-height: 48px;
  }
  .catering-banner-left-content-info button {
    width: 100%;
  }
  .catering-banner-image {
    flex: auto;
    height: 262px;
  }
}
.our-story-container {
  max-width: calc(100% - 160px);
  margin: 80px auto 40px;
}
.our-story-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.our-story-image {
  flex: 1;
  width: 100%;
  height: 480px;
  overflow: hidden;
  border-radius: 16px;
}
.our-story-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.our-story-right-content {
  flex: 1;
}
.our-story-right-content-info {
  padding-left: 100px;
}
.our-story-right-content button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.our-story-content-text {
  font-size: 64px;
  line-height: 64px;
  position: relative;
  color: var(--color-neutrals-800);
}
.our-story-content-text sup {
  font-size: 32px;
  line-height: 32px;
}
.our-story-content-text span {
  font-size: 40px;
  line-height: 40px;
  position: absolute;
  top: -42px;
  left: 0;
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  transform: rotate(-4deg);
}
.our-story-content-description {
  font-family: var(--font-myriad-pro-semibold-condensed);
  margin-bottom: 32px;
  margin-top: 16px;
}
@media screen and (max-width: 1040px) {
  .our-story-right-content-info {
    padding-left: 30px;
  }
}
@media screen and (max-width: 768px) {
  .our-story-container {
    max-width: 100%;
    padding: 16px;
    margin: 48px 0 0;
  }
  .our-story-content {
    flex-direction: column-reverse;
  }
  .our-story-right-content-info {
    padding-left: 0;
  }
  .our-story-content-text {
    font-size: 40px;
    line-height: 40px;
    max-width: calc(100% - 40px);
  }
  .our-story-content-text span {
    font-size: 32px;
    line-height: 48px;
  }
  .our-story-right-content-info button {
    width: 100%;
  }
  .our-story-image {
    flex: auto;
    height: 262px;
  }
}
.about-download-app-container {
  padding: 40px;
  max-width: 1280px;
  margin: 0 auto;
}
.about-download-app-content {
  display: flex;
  background-color: var(--color-yellow-400);
  border-radius: 16px;
  overflow: hidden;
}
.about-download-app-image {
  flex: 1;
  max-height: 400px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}
.about-download-app-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-download-app-right-content {
  flex: 1;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
}
.thanks-banner-content-text {
  font-size: 64px;
  line-height: 64px;
  position: relative;
  color: var(--color-neutrals-800);
}
.thanks-banner-thanks-text {
  font-size: 40px;
  line-height: 40px;
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  transform: rotate(-4deg);
  display: block;
  display: table-cell;
  position: relative;
}
@media (max-width: 768px) {
  .about-download-app-container {
    padding: 0;
  }
  .about-download-app-content {
    border-radius: unset;
  }
  .about-download-app-image {
    display: none;
  }
  .about-download-app-right-content {
    padding: 16px;
  }
  .about-download-app-right-content .thanks-banner-content-text {
    margin-bottom: 0;
  }
}
.mobile-top-banner-container {
  position: relative;
  height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}
.top-banner-swiper,
.top-banner-swiper .swiper-wrapper,
.top-banner-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}
.top-banner-swiper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.mobile-top-banner-container .video-content-container {
  padding: 0;
  width: 100%;
  border-radius: unset;
  position: unset;
}
.mobile-top-banner-content {
  position: relative;
  z-index: 2;
}
.mobile-top-banner-content .top-banner-content {
  min-height: 64px;
}
.mobile-top-banner-container .top-banner-content {
  padding: 12px 16px;
  align-items: center;
}
.banner-mobile-swiper-container {
  position: relative;
  margin-bottom: 80px;
}
.banner-mobile-swiper-container.single-slide {
  padding: 0 16px;
}
.navigation-wrapper button {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--color-red-bolt);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}
.navigation-wrapper {
  margin-left: auto;
}
.swiper-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  cursor: pointer;
  border-radius: 25px;
  margin: 0 7px;
  background: #f0f0f03d;
  transition: all 0.3s ease;
}
.swiper-bullet-active {
  background-color: var(--color-neutrals-100);
  width: 40px;
}
.custom-bullets {
  width: fit-content;
}
.swiper-card {
  border-radius: 16px;
}
.swiper-card .order-card {
  padding: 16px;
}
.offer-card-footer {
  padding: 6px 16px;
  border-top: 1px solid var(--color-neutrals-600);
  text-align: center;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.offer-card-footer a {
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-blue-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.offer-card-footer a:hover,
.offer-card-footer a:focus {
  color: var(--color-blue-500);
}
.order-card-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.order-card-info h2 {
  font-size: 28px;
  line-height: 28px;
  color: var(--color-neutrals-800);
}
.order-card-info p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
}
.order-card-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.order-card-buttons button {
  width: 100%;
  padding: 12px;
}
.header-logo-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-logo-link {
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-logo-content .offer-container {
  margin-right: 0;
}
.header-logo-content .offer-container .offer-title {
  font-size: 18px;
  line-height: 18px;
}
.header-logo-content .offer-container .offer-description {
  font-size: 14px;
  line-height: 14px;
}
.header-logo-content .offer-container .offer-description sup {
  font-size: 8px;
}
.mobile-top-banner-header {
  padding: 8px 16px;
}
.banner-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px;
  text-align: center;
  position: relative;
  min-height: 56px;
}
.banner-close-button {
  position: absolute;
  background: var(--color-white);
  border: none;
  cursor: pointer;
  padding: 0;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-neutrals-800);
}
.banner-info .car-icon {
  color: var(--color-red-500);
}
.banner-info h4 {
  color: var(--color-neutrals-600);
}
.banner-info p {
  font-size: 12px;
  line-height: 10px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.authenticated-header-mobile-content .user-name-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: left;
  position: relative;
}
.authenticated-header-mobile-content .user-name-button .unread-message-badge {
  position: absolute;
  top: -4px;
  right: -22px;
  width: 20px;
  height: 20px;
  font-size: 14px;
}
.authenticated-header-mobile-content h5 {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-600);
}
.authenticated-header-mobile-content h5 span {
  font-size: 24px;
  line-height: 28px;
  color: var(--color-neutrals-600);
  font-family: var(--font-hollie-script);
}
.authenticated-header-mobile-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-preparing-info {
  display: flex;
  align-items: center;
  gap: 4px;
}
.order-preparing-info h6 {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-neutrals-600);
}
.order-preparing-info p {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.noise-effect {
  background-image: url(/images/card-bg-CHIX6r4g.png);
  background-size: cover;
  background-position: center;
  box-shadow: 4px 4px 12px #fff3 inset;
  filter: drop-shadow(4px 4px 16px rgba(0, 0, 0, 0.08));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
@media (max-height: 600px) {
  .mobile-top-banner-container {
    height: 100%;
  }
  .mobile-top-banner-content {
    min-height: 1000px;
  }
  .background-video {
    object-fit: fill;
    height: auto;
  }
}
@media (max-height: 550px) {
  .mobile-top-banner-content {
    min-height: 850px;
  }
}
@media (max-height: 500px) {
  .mobile-top-banner-content {
    min-height: 700px;
  }
}
@media (max-height: 400px) {
  .mobile-top-banner-content {
    min-height: 580px;
  }
}
@media (max-height: 300px) {
  .mobile-top-banner-content {
    min-height: 450px;
  }
}
.mobile-reward-banner-wrapper {
  margin-top: -64px;
  margin-bottom: 54px;
  position: relative;
  z-index: 10;
}
.mobile-reward-banner-header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--color-red-500);
}
.mobile-reward-banner-header .offer-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.mobile-reward-banner-header .offer-container .flex-item-center {
  flex-direction: column;
  gap: 0;
  margin-left: 0;
}
.mobile-reward-banner-header .offer-container .flex-item-center svg {
  transform: none;
  margin-top: 0;
  width: auto;
  height: auto;
  animation: none;
}
.mobile-reward-banner-header .offer-container .thin-arrow-right {
  transform: rotate(90deg);
  color: var(--color-red-500);
  position: absolute;
  right: -36px;
}
.mobile-reward-banner-header .offer-container .offer-title {
  font-family: var(--font-hollie-script);
  font-size: 24px;
  line-height: 32px;
  text-transform: capitalize;
}
.mobile-reward-banner-header .offer-container .offer-description {
  font-size: 16px;
}
.mobile-reward-banner-header h1 {
  font-family: var(--font-hollie-script);
  font-size: 32px;
  line-height: 32px;
  color: var(--color-red-500);
}
.mobile-reward-banner-content-wrapper {
  padding: 16px;
}
.mobile-reward-banner-content {
  background-image: url(/assets/mobile-reward-bg---i1E9A8.webp);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 24px 16px 0;
  border-radius: 12px;
}
.mobile-reward-banner-content .reward-banner-content-text {
  font-size: 40px;
  line-height: 32px;
}
.mobile-reward-banner-content .reward-banner-content-text sup {
  font-size: 20px;
}
.mobile-reward-banner-content .reward-banner-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.mobile-reward-banner-content .reward-banner-buttons button {
  width: 100%;
}
.reward-banner-bottom-content {
  position: relative;
  min-height: 389px;
  padding-top: 100px;
  margin-top: 24px;
}
.mobile-frame {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: -3px;
  object-fit: contain;
}
.sms-signup-banner-wrapper {
  position: relative;
  max-width: 242px;
  margin-left: auto;
  margin-right: auto;
}
.sms-speech-bubble {
  background: var(--color-blue-500);
  border-radius: 16px;
  padding: 12px;
  position: relative;
  color: var(--color-white);
  width: calc(100% - 18px);
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}
.sms-speech-bubble:hover {
  transform: scale(1.1);
}
.sms-speech-bubble-tail {
  position: absolute;
  bottom: -10px;
  right: 16px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--color-blue-500);
}
.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.flex-column-center .mobile-logo {
  margin-bottom: 8px;
}
.sms-bubble-header {
  font-family: var(--font-myriad-pro-black-condensed);
  display: inline-flex;
  gap: 4px;
}
.sms-bubble-header h4 {
  font-family: var(--font-myriad-pro-black-condensed);
}
.sms-tap-instruction {
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.tap-text {
  color: var(--color-blue-500);
}
.sms-disclaimer {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-400);
  margin-top: 14px;
}
.sms-tap-button {
  cursor: pointer;
}
.sms-tap-button img {
  animation: arrowBounceUp 2s ease-in-out infinite;
}
@keyframes arrowBounceUp {
  0%,
  to {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(4px);
  }
}
.reorder-section {
  max-width: 1320px;
  padding: 40px 20px;
  margin-left: auto;
  margin-right: auto;
}
.reorder-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 32px;
}
.reorder-header-left-content {
  display: flex;
  align-items: center;
  gap: 24px;
}
.reorder-header-left-content h2 {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-neutrals-800);
}
.reorder-header-right-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  color: var(--color-neutrals-800);
}
.reorder-header-right-content:hover {
  color: var(--color-red-500);
  text-decoration: underline;
}
.reorder-card-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.reorder-card-container .no-results {
  width: 100%;
}
.reorder-tab {
  border: 1px solid var(--color-neutrals-200);
  padding: 4px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.tab-button {
  outline: none;
  border: none;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 16px;
  line-height: 24px;
  width: 100%;
  min-width: 64px;
  padding: 8px 16px;
  background-color: transparent;
  border-radius: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tab-button:hover:not(.active) {
  background: none;
}
.tab-button.active {
  background-color: var(--color-neutrals-800);
  color: var(--color-white);
  outline: none;
  transition: background-color 0.3s linear;
}
.tab-button:focus,
.tab-button:focus-visible {
  outline: 1px solid var(--color-blue-suede);
}
@media screen and (max-width: 1024px) {
  .reorder-card-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .reorder-section {
    position: relative;
    z-index: 50;
    margin-top: -64px;
    margin-bottom: 54px;
    padding: 0;
  }
  .reorder-header-left-content,
  .reorder-tab {
    width: 100%;
  }
  .reorder-header-right-content {
    margin-top: 32px;
  }
  .reorder-card-container {
    grid-template-columns: repeat(1, 1fr);
  }
  .reorder-section-content-wrapper {
    padding: 40px 16px;
  }
}
.reorder-card {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 16px;
  transition: all 0.2s ease;
  background-color: var(--color-white);
}
.reorder-card:hover {
  border-color: var(--color-neutrals-200);
  box-shadow: 0 4px 12px #0000001a;
  transform: translateY(-1px);
}
.reorder-card:focus {
  outline: 2px solid var(--color-red-500);
  outline-offset: 2px;
  border-color: var(--color-red-500);
}
.card-top {
  display: flex;
  gap: 16px;
  min-height: 112px;
}
.reorder-card-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}
.reorder-card-icon {
  display: flex;
  height: 98px;
  min-width: 72px;
  background: var(--color-yellow-400);
  align-items: center;
  justify-content: center;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    91.67% calc(100% - 6px),
    83.34% 100%,
    75.01% calc(100% - 6px),
    66.68% 100%,
    58.35% calc(100% - 6px),
    50.02% 100%,
    41.69% calc(100% - 6px),
    33.36% 100%,
    25.03% calc(100% - 6px),
    16.7% 100%,
    8.37% calc(100% - 6px),
    0 100%
  );
}
.favorite-icon-container {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  cursor: pointer;
  color: var(--color-red-500);
  position: relative;
}
.favorite-icon-container .heart-outline-icon {
  color: var(--color-neutrals-800);
}
.group-order {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-neutrals-400);
}
.group-order span {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  line-height: 16px;
}
.card-general-info {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.info-badge-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.info-badge-container .badge {
  font-size: 12px;
  line-height: 16px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  padding: 4px 12px;
  border-radius: 100px;
}
.info-badge-container .badge.completed {
  color: var(--color-green-500);
  background-color: var(--color-green-50);
}
.info-badge-container .badge.scheduled {
  color: var(--color-neutrals-500);
  background-color: var(--color-neutrals-100);
}
.info-badge-container .badge.canceled {
  color: var(--color-red-700);
  background-color: var(--color-red-50);
}
.info-badge-container .badge.inprogress {
  color: var(--color-blue-600);
  background-color: var(--color-blue-50);
}
.general-info-type {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-neutrals-400);
}
.general-info-name {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
  overflow: hidden;
  line-clamp: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.general-info-address .store-name {
  font-size: 16px;
  line-height: 18px;
  color: var(--color-neutrals-600);
  margin-bottom: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.general-info-address .store-address {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.dashed-line {
  border: 1px dashed var(--color-neutrals-100);
}
.reorder-button-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.order-total-and-time h4 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.order-total-and-time p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
}
.reorder-button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  min-width: 120px;
}
.full-width-button {
  width: 100%;
}
.order-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.order-info-text {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
  overflow: hidden;
}
.see-full-order {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--font-myriad-pro-black-condensed);
  width: max-content;
}
.see-full-order:hover {
  cursor: pointer;
  color: var(--color-red-500);
}
@media screen and (max-width: 768px) {
  .reorder-card-icon {
    min-width: 56px;
  }
}
.fav-modal-container {
  padding: 40px;
  display: flex;
  flex-direction: column;
}
.fav-modal-container .dashed-line {
  margin: 20px 0;
}
.fav-modal-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fav-modal-header h3 {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-neutrals-800);
}
.fav-modal-header p {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
}
.fav-modal-button-container {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fav-modal-button-container button {
  height: 48px;
  width: 100%;
}
.error-message {
  margin-top: 12px;
  padding: 12px;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
}
.error-message p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .fav-modal-container {
    padding: 24px 16px;
  }
  .fav-modal-header {
    gap: 8px;
  }
  .fav-modal-header h3 {
    font-size: 24px;
    line-height: 24px;
  }
  .fav-modal-header p {
    font-size: 14px;
    line-height: 20px;
  }
  .fav-modal-button-container button {
    font-size: 16px;
    line-height: 24px;
  }
}
.order-details-modal-wrapper {
  max-width: 440px;
}
.order-details-modal {
  max-width: unset;
  border: none;
  cursor: default;
  padding: 0 24px 24px;
}
.order-details-wrapper .order-details-title {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
  margin-bottom: 8px;
}
.order-payment-details p,
.order-grand-total p {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.order-payment-details p span {
  font-size: 14px;
  line-height: 20px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
}
.taxes-and-fees-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.order-grand-total h4 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-600);
}
.order-total-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.order-total-container .order-total-and-time p {
  color: var(--color-neutrals-600);
}
.all-order-items {
  display: flex;
  flex-direction: column;
  max-height: 250px;
  overflow: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.all-order-items.favorite-order-items-container {
  min-height: 82px;
}
.order-item-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
}
.order-item-wrapper img {
  width: 70px;
  height: auto;
  object-fit: cover;
}
.order-item-info-container {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.order-item-info {
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.order-item-name {
  font-size: 16px;
  line-height: 18px;
  font-family: var(--font-sink);
  color: var(--color-neutrals-600);
}
.reorder-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.reorder-loading-spinner .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid var(--color-white);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.order-item-description {
  font-size: 14px;
  line-height: 18px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-400);
}
.order-item-price {
  display: flex;
  align-items: center;
  gap: 8px;
}
.order-item-price h6 {
  font-size: 16px;
  line-height: 18px;
  color: var(--color-neutrals-600);
  min-width: 40px;
  text-align: right;
}
.order-item-price p {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-400);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.order-item-price h6 {
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.terms-link {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-white);
}
@media screen and (max-width: 768px) {
  .order-details-modal {
    padding: 0 16px 16px;
  }
}
.confirmation-modal-header {
  padding: 36px 40px;
  border-bottom: 1px solid var(--color-neutrals-100);
  position: relative;
  overflow: hidden;
}
.confirmation-modal-header h2 {
  font-size: 64px;
  line-height: 64px;
  padding: 0;
  text-align: start;
}
.confirmation-modal-content {
  padding: 24px 40px;
}
.confirmation-modal-content .delivery-error {
  margin-top: 0;
}
.confirmation-modal-content .attention-text {
  align-items: flex-start;
}
.confirmation-action-buttons {
  margin-top: 20px;
}
.confirmation-action-buttons button {
  width: 100%;
}
.confirmation-action-buttons button svg {
  margin-right: 8px;
}
.confirmation-go-back-button {
  width: 100%;
  margin-top: 20px;
}
.attention-text p {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-500);
}
@media (max-width: 768px) {
  .confirmation-modal-header {
    padding: 36px 16px;
  }
  .confirmation-modal-header h2 {
    font-size: 40px;
    line-height: 40px;
  }
  .confirmation-modal-content {
    padding: 16px 16px 24px;
  }
}
.save-product-modal-container {
  padding: 24px;
  max-width: 100%;
  width: 100%;
}
.save-product-modal-header {
  text-align: center;
  margin-bottom: 24px;
}
.save-product-modal-header h3 {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-neutrals-900);
  margin: 0 0 8px;
}
.save-product-modal-header p {
  font-size: 16px;
  color: var(--color-neutrals-600);
  margin: 0;
  line-height: 1.5;
}
.save-product-modal-header .product-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary-600);
  margin: 8px 0 0;
  padding: 8px 12px;
  background-color: var(--color-primary-50);
  border-radius: 6px;
  display: inline-block;
}
.dashed-line {
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    var(--color-neutrals-300) 0,
    var(--color-neutrals-300) 4px,
    transparent 4px,
    transparent 8px
  );
  margin: 12px 0;
}
.save-product-modal-button-container {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.save-product-modal-button-container button {
  flex: 1;
}
.error-message {
  background-color: var(--color-error-50);
  border: 1px solid var(--color-error-200);
  border-radius: 8px;
  padding: 12px;
  margin: 16px 0;
}
.error-message p {
  color: var(--color-error-700);
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .save-product-modal-container {
    padding: 20px;
  }
  .save-product-modal-header h3 {
    font-size: 20px;
  }
  .save-product-modal-header p {
    font-size: 14px;
  }
  .save-product-modal-button-container {
    flex-direction: column;
  }
  .fav-modal-container .dashed-line {
    margin: 20px 0;
  }
}
.empty-state-section {
  padding: 60px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.empty-state-section-icon {
  width: 96px;
  height: 96px;
  background: var(--color-neutrals-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 3s ease-in-out infinite;
}
.empty-state-section-icon svg {
  width: 64px;
  height: 64px;
  color: var(--color-neutrals-400);
}
.empty-state-section-title {
  font-size: 32px;
  color: var(--color-red-500);
  font-family: var(--font-hollie-script);
  margin-top: -25px;
  transform: rotate(-4deg);
  filter: drop-shadow(3px 0px 0px white);
}
.empty-state-section-message {
  margin-top: 8px;
  max-width: 240px;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-700);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
@keyframes float {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.update-notification-banner-center-content {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 8px;
}
.update-notification-banner-close-icon {
  position: absolute;
  right: 28px;
  cursor: pointer;
}
.update-notification-banner-close-icon svg {
  vertical-align: middle;
}
.update-notification-banner-content {
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-neutrals-800);
  height: 40px;
  padding: 0 28px;
  color: var(--color-neutrals-100);
}
.update-notification-banner-center-content p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-100);
}
.update-notification-banner-center-content a {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-100);
  font-family: var(--font-myriad-pro-black-condensed);
}
.footer {
  background-color: var(--color-neutrals-800);
}
.footer-top {
  padding: 60px 80px;
}
.footer-menu-sections {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.footer-section-title {
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-neutrals-300);
  margin-bottom: 24px;
  min-height: 28px;
}
.footer-menu-list {
  list-style: none;
}
.footer-menu-list li {
  margin-bottom: 12px;
}
.footer-menu-link {
  text-decoration: none;
  color: var(--color-white);
  font-family: var(--font-myriad-pro-black-condensed);
}
.footer-menu-link:hover {
  color: var(--color-red-400);
  text-decoration: underline;
}
.footer-animation-toggle-wrapper .footer-menu-link:hover {
  color: var(--color-white);
  text-decoration: none;
  cursor: default;
}
.footer-menu-button {
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
}
.footer-menu-button:hover {
  background: transparent;
}
.footer-bottom {
  padding: 16px 80px;
  border-top: 1px solid var(--color-neutrals-600);
}
.footer-bottom-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-app-buttons,
.footer-social {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 1;
}
.footer-app-buttons .app-store-button {
  max-width: 150px;
  height: 40px;
}
.footer-app-buttons .app-store-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.footer-copyright {
  flex: 1;
}
.footer-copyright p {
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-neutrals-300);
  text-align: center;
}
.footer-social {
  justify-content: flex-end;
}
.footer-social-link {
  width: 40px;
  height: 40px;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social-link:hover {
  color: var(--color-red-500);
}
.tab-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  z-index: 99;
  height: 72px;
  padding: 8px;
}
.tab-bar .bag-count-button-wrapper {
  position: absolute;
  top: calc(-100% + 16px);
  right: 8px;
}
html:not(.animations-paused) .tab-bar .bag-count-button-wrapper {
  animation: slideUpFadeIn 0.4s ease-out forwards;
}
@keyframes slideUpFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tab-bar .bag-count-button {
  position: relative;
}
.tab-bar-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-bar-item button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  color: var(--color-neutrals-800);
  width: 100%;
  background-color: var(--color-white);
}
.tab-bar-item button p {
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1px;
  color: var(--color-neutrals-600);
}
.tab-bar-item.active button {
  color: var(--color-red-500);
}
.footer-disclaimer-section {
  padding: 28px 80px;
  border-top: 1px solid var(--color-neutrals-600);
}
.footer-disclaimer-text,
.footer-disclaimer-text a {
  color: var(--color-neutrals-400);
  font-size: 14px;
  line-height: 20px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-align: center;
  transition: color 0.3s ease;
}
.footer-disclaimer-text a:hover {
  color: var(--color-red-500);
}
.footer-animation-toggle-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer-animation-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: var(--color-neutrals-600);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}
.footer-animation-toggle:hover {
  background-color: var(--color-neutrals-500);
}
.footer-animation-toggle--active {
  background-color: var(--color-red-500);
}
.footer-animation-toggle--active:hover {
  background-color: var(--color-red-600);
}
.footer-animation-toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: var(--color-white);
  border-radius: 50%;
  transition: transform 0.3s ease;
  transform: translate(0);
}
.footer-animation-toggle--active .footer-animation-toggle-slider {
  transform: translate(20px);
}
.tab-bar-item-icon {
  position: relative;
  width: max-content;
  margin: auto;
}
.tab-bar-item-icon .unread-message-badge {
  position: absolute;
  top: -8px;
  right: -18px;
  width: 20px;
  height: 20px;
  font-size: 14px;
}
@media screen and (max-width: 768px) {
  .footer {
    padding-bottom: 80px;
  }
  .footer-top {
    padding: 0;
  }
  .footer-menu-sections {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    padding-bottom: 28px;
  }
  .footer-menu-section {
    padding: 0 16px;
  }
  .footer-menu-sections > :nth-child(1) {
    grid-column: 1 / span 2;
  }
  .footer-logo {
    padding: 40px;
    text-align: center;
    border-bottom: 1px solid var(--color-neutrals-600);
    margin-bottom: 16px;
  }
  .footer-bottom-container {
    flex-direction: column;
    gap: 12px;
  }
  .footer-social {
    order: 1;
  }
  .footer-app-buttons {
    order: 2;
  }
  .footer-copyright {
    order: 3;
  }
  .footer-disclaimer-section {
    padding: 16px;
  }
  .footer-disclaimer-text {
    text-align: left;
  }
}
.new-password-input-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.personal-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed var(--color-neutrals-100);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.personal-info-header .edit-btn {
  gap: 8px;
}
.account-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.account-form .input-container input:read-only,
.account-form .read-only-input label {
  color: var(--color-neutrals-500);
}
.account-form .read-only-input .input-wrapper {
  border-color: var(--color-neutrals-500);
}
.account-section-content-wrapper .reset-password-btn {
  margin-top: 20px;
}
.reset-password-wrapper {
  display: flex;
  justify-content: flex-start;
}
.account-edit-actions {
  border-top: 1px dashed var(--color-neutrals-100);
  padding-top: 20px;
  margin-top: 20px;
  display: flex;
  gap: 16px;
}
.account-edit-actions button {
  width: 100%;
}
.account-referral-banner {
  display: flex;
  max-width: 736px;
  margin-top: 16px;
  border-radius: 20px;
  border: 1px solid var(--color-yellow-300);
  overflow: hidden;
  height: auto;
  min-height: 100px;
}
.account-referral-section {
  background-color: var(--color-white);
  padding: 0 24px;
  max-width: 357px;
}
.account-referral-section h2 {
  color: var(--color-neutrals-800);
  padding: 0;
  text-align: start;
  white-space: nowrap;
}
.account-referral-code {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-neutrals-800);
  font-size: 20px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.account-referral-code .copy-address-button {
  color: var(--color-neutrals-800);
  height: 24px;
}
.mobile-account-referral-banner {
  padding: 20px;
}
.mobile-account-referral-container {
  border: 1px solid var(--color-yellow-300);
  border-radius: 16px;
  overflow: hidden;
}
.mobile-account-referral-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
}
.mobile-account-referral-section {
  border: 1px solid var(--color-yellow-300);
  border-radius: 16px;
  height: 54px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.mobile-account-referral-section p {
  flex: 1;
  text-align: center;
}
.mobile-account-referral-section .account-referral-code {
  flex: 1;
  background-color: var(--color-yellow-300);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(
    100% 0,
    0 0,
    6px 11.11%,
    0 22.22%,
    6px 33.33%,
    0 44.44%,
    6px 55.56%,
    0 66.67%,
    6px 77.78%,
    0 88.89%,
    6px 100%,
    100% 100%
  );
}
.mobile-referral-banner-content {
  background-color: var(--color-yellow-300);
  padding: 20px;
}
.teeth-top {
  --tooth-depth: 6px;
  clip-path: polygon(
    0 var(--tooth-depth),
    1.7857% 0,
    3.5714% var(--tooth-depth),
    5.3571% 0,
    7.1429% var(--tooth-depth),
    8.9286% 0,
    10.7143% var(--tooth-depth),
    12.5% 0,
    14.2857% var(--tooth-depth),
    16.0714% 0,
    17.8571% var(--tooth-depth),
    19.6429% 0,
    21.4286% var(--tooth-depth),
    23.2143% 0,
    25% var(--tooth-depth),
    26.7857% 0,
    28.5714% var(--tooth-depth),
    30.3571% 0,
    32.1429% var(--tooth-depth),
    33.9286% 0,
    35.7143% var(--tooth-depth),
    37.5% 0,
    39.2857% var(--tooth-depth),
    41.0714% 0,
    42.8571% var(--tooth-depth),
    44.6429% 0,
    46.4286% var(--tooth-depth),
    48.2143% 0,
    50% var(--tooth-depth),
    51.7857% 0,
    53.5714% var(--tooth-depth),
    55.3571% 0,
    57.1429% var(--tooth-depth),
    58.9286% 0,
    60.7143% var(--tooth-depth),
    62.5% 0,
    64.2857% var(--tooth-depth),
    66.0714% 0,
    67.8571% var(--tooth-depth),
    69.6429% 0,
    71.4286% var(--tooth-depth),
    73.2143% 0,
    75% var(--tooth-depth),
    76.7857% 0,
    78.5714% var(--tooth-depth),
    80.3571% 0,
    82.1429% var(--tooth-depth),
    83.9286% 0,
    85.7143% var(--tooth-depth),
    87.5% 0,
    89.2857% var(--tooth-depth),
    91.0714% 0,
    92.8571% var(--tooth-depth),
    94.6429% 0,
    96.4286% var(--tooth-depth),
    98.2143% 0,
    100% var(--tooth-depth),
    100% 100%,
    0 100%
  );
}
.mobile-referral-banner-content h3 {
  font-size: 20px;
  line-height: 24px;
  color: var(--color-red-600);
}
.mobile-referral-banner-content .thin-arrow-right-icon {
  transform: rotate(260deg);
  color: var(--color-red-600);
  flex-shrink: 0;
}
.mobile-referral-banner-content p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
}
.account-delete-btn-container {
  margin-top: 16px;
  max-width: 736px;
  text-align: end;
}
.calendar-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.calendar-btn:hover {
  background: transparent;
}
@media (max-width: 768px) {
  .account-form {
    grid-template-columns: 1fr;
  }
  .account-delete-btn-container {
    margin-top: 0;
    max-width: 100%;
    text-align: center;
    padding-bottom: 20px;
  }
  .mobile-referral-banner-content {
    display: flex;
    align-items: center;
  }
  .reset-password-wrapper {
    justify-content: center;
  }
}
.account-side-bar {
  flex: 0 0 30%;
  border-right: 1px solid var(--color-neutrals-100);
  max-width: 385px;
}
.account-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-neutrals-100);
}
.account-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue-50);
  color: var(--color-blue-500);
}
.account-user-details {
  display: flex;
  flex-direction: column;
}
.account-user-details span {
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  font-size: 32px;
  line-height: 32px;
  transform: rotate(-4deg);
}
.account-user-details h2 {
  color: var(--color-neutrals-600);
  line-height: 24px;
  padding: 0;
}
.account-user-details p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
  font-size: 14px;
  line-height: 20px;
}
.account-menu-items {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding-bottom: 32px;
}
.account-menu-items ul {
  list-style: none;
}
.account-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 16px 24px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.account-menu-item:hover,
.account-menu-item.active-menu {
  background-color: var(--color-red-50);
}
.account-menu-item-icon {
  color: var(--color-red-500);
  flex-shrink: 0;
}
.account-menu-item-title {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-800);
  text-transform: capitalize;
}
.badge-icon-container {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.unread-message-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-red-500);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.account-menu-item-end {
  margin-left: auto;
}
.divider {
  height: 1px;
  background-color: var(--color-neutrals-100);
  margin: 8px 0;
}
.account-delete-btn {
  background-color: transparent;
  color: var(--color-neutrals-800);
  border: none;
  cursor: pointer;
  text-decoration: underline;
  font-size: 18px;
  font-family: var(--font-myriad-pro-black-condensed);
  padding-left: 24px;
  padding-top: 12px;
}
.account-delete-btn:hover {
  background-color: transparent;
  color: var(--color-red-500);
}
.address-card {
  padding: 12px 16px;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 16px;
  background-color: var(--color-white);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.addresses-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.address-card-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.address-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-neutrals-100);
  border-radius: 50%;
}
.address-details-wrapper {
  flex: 1;
}
.address-details-wrapper p {
  margin: 0;
}
.address-details-wrapper .address-name {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
}
.address-details-wrapper .full-address {
  font-size: 14px;
  line-height: 18px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.address-details-wrapper .full-address span {
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.location-modal-content .address-details-wrapper .full-address {
  font-family: var(--font-myriad-pro-black-condensed);
}
.address-delete-button {
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-neutrals-800);
}
.address-delete-button:hover {
  color: var(--color-red-500);
  background: transparent;
}
.communications-banner-content.points-banner {
  color: var(--color-red-600);
  display: flex;
  align-items: flex-end;
  width: 205px;
}
.communications-banner-content.points-banner img {
  vertical-align: middle;
}
.communications-banner-content.points-banner svg {
  flex-shrink: 0;
  margin-bottom: 4px;
}
.communications-section {
  position: relative;
  padding: 0 !important;
}
.communications-section .error-message {
  padding: 40px !important;
}
.communications-header-wrapper {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  padding: 40px 0 0 40px;
}
.communications-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.communications-header p {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
}
.communications-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
  padding: 0 40px 40px;
}
.communications-banner-content {
  padding: 18px 24px;
  width: 294px;
}
@media (max-width: 1100px) {
  .communications-header .sections-title {
    font-size: 24px !important;
    line-height: 24px !important;
  }
  .communications-banner-content h2 {
    font-size: 22px !important;
    line-height: 22px !important;
  }
  .communications-banner-content p {
    font-size: 14px !important;
    line-height: 22px !important;
  }
}
@media (max-width: 768px) {
  .communications-header-wrapper {
    flex-direction: column;
    padding: 16px 16px 0;
    align-items: flex-start;
    gap: 0;
  }
  .communications-banner-content h2 {
    font-size: 24px !important;
    line-height: 24px !important;
  }
  .communications-banner-content p {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  .communications-checkboxes {
    padding: 0 16px;
  }
}
.product-details-modal {
  max-width: 800px;
}
.product-details-content-wrapper {
  padding: 24px 24px 16px;
}
.product-details-content {
  display: flex;
  gap: 16px;
  position: relative;
  max-height: 384px;
}
.product-details-content-right {
  width: 100%;
  overflow-y: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.product-details-content-right .dashed-line {
  margin: 12px 0;
}
.product-details-modal-header .product-category-text {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.4px;
  color: var(--color-neutrals-400);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.product-details-modal-header-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.product-name-modal-text {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.product-delivery-info-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.product-delivery-info-wrapper p {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-modal-modifiers-text {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
}
.product-modifiers-item p {
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-details-modal-footer {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--color-neutrals-100);
}
.product-price-wrapper h4 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.product-price-wrapper p {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-price-wrapper p span {
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
  margin-left: 4px;
}
.product-details-btn-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.product-details-btn-wrapper .quantity-selector {
  width: 164px;
}
.product-details-btn-wrapper .add-to-bag-btn {
  width: 196px;
  gap: 8px;
}
.product-modal-description-wrapper p.product-description-text {
  line-clamp: none;
  -webkit-line-clamp: none;
}
.product-details-content-left img {
  width: auto;
  height: auto;
  max-width: 368px;
}
@media (max-width: 768px) {
  .product-name-modal-text {
    font-size: 24px;
    line-height: 24px;
  }
  .product-details-modal .modal-content {
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
  }
  .product-details-content-wrapper {
    flex: 1;
    overflow: auto;
  }
  .product-delivery-info-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .past-product-card-header.mobile-product-details-header {
    margin-bottom: 16px;
  }
  .product-details-content {
    flex-direction: column;
    max-height: unset;
  }
  .product-details-content-left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .product-details-content-left img {
    width: 100%;
    height: 100%;
    max-width: 368px;
  }
  .product-details-modal-footer .product-price-wrapper {
    display: none;
  }
  .product-details-btn-wrapper,
  .product-details-btn-wrapper .add-to-bag-btn {
    width: 100%;
  }
  .qty-selected .product-price-wrapper {
    display: block;
  }
  .qty-selected .product-details-btn-wrapper {
    width: auto;
  }
  .qty-selected .product-details-btn-wrapper .add-to-bag-btn {
    width: 182px;
  }
}
.quantity-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  height: 48px;
  border: 1px solid var(--color-neutrals-200);
  border-radius: 100px;
  overflow: hidden;
  justify-content: center;
}
.quantity-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutrals-600);
  transition: all 0.2s ease;
}
.quantity-btn:hover {
  background-color: var(--color-neutrals-100);
}
.quantity-btn:disabled {
  cursor: not-allowed;
  color: var(--color-neutrals-200);
}
.quantity-value {
  flex: 1;
  text-align: center;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.past-product-card {
  width: 100%;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--color-neutrals-100);
  background-color: var(--color-white);
}
.past-product-card-content {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}
.product-card-right-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-grow: 1;
}
.past-product-card-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.past-product-card-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.product-category-text {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.4px;
  color: var(--color-neutrals-500);
  text-transform: uppercase;
}
.product-name-text {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: 0px;
  color: var(--color-neutrals-800);
}
.product-heart-btn {
  height: 40px;
  width: 40px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-neutrals-100);
  background: none;
  color: var(--color-neutrals-800);
  flex-shrink: 0;
}
.product-heart-btn:hover {
  border-color: var(--color-neutrals-100);
  background: none;
}
.product-heart-btn.product-heart-btn-favorite {
  color: var(--color-red-500);
}
.product-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-content-wrapper .product-description-text {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0px;
  color: var(--color-neutrals-600);
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-nutrition-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
}
.product-nutrition-wrapper p {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0px;
  color: var(--color-neutrals-500);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-order-date {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-neutrals-500);
  margin-top: 8px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-price-btn-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.product-btn-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.product-btn-wrapper button {
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  min-width: 100px;
}
.product-price-text {
  font-size: 12px;
  line-height: 14px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.menu-card-section-content-wrapper .product-price-text {
  font-size: 16px;
  line-height: 18px;
}
.menu-card-section-content-wrapper .product-price-text2 {
  font-size: 14px;
  line-height: 18px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-modifiers-text {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-500);
}
.product-modifiers-content-text {
  font-size: 16px;
  line-height: 20px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-modifiers-content {
  display: grid;
  font-family: var(--font-myriad-pro-semibold-condensed);
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}
.product-modifiers-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-content-wrapper .product-details-btn {
  color: var(--color-neutrals-800);
  width: max-content;
}
.quantity-selector-wrapper .quantity-selector {
  width: 50%;
}
.quantity-selector-wrapper .add-to-bag-btn {
  width: 50%;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
}
.product-card-badge {
  font-size: 12px;
  line-height: 16px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  padding: 4px 12px;
  border-radius: 100px;
  background-color: var(--color-neutrals-100);
  color: var(--color-neutrals-600);
  position: absolute;
  top: 0;
  left: 0;
}
.mobile-product-content {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.mobile-product-image {
  width: 100px;
  height: auto;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 40px;
}
.mobile-product-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.5);
  mix-blend-mode: multiply;
}
.past-products-container .mobile-product-image img {
  transform: none;
  scale: 1.2;
}
.mobile-add-to-bag-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-neutrals-800);
  color: var(--color-neutrals-800);
  background: none;
  flex-shrink: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0;
  background: var(--color-white);
}
.mobile-add-to-bag-btn:hover {
  border: 1px solid var(--color-neutrals-800);
  background: var(--color-white);
}
.product-image-wrapper {
  max-width: 200px;
  max-height: 200px;
  min-width: 80px;
}
.product-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.15;
}
@media (max-width: 768px) {
  .past-product-card {
    padding: 16px;
  }
  .past-product-card-header {
    margin-bottom: 8px;
  }
  .product-card-right-content {
    gap: 0;
    width: 100%;
  }
  .product-content-wrapper .product-description-text {
    line-clamp: 5;
    -webkit-line-clamp: 5;
    font-size: 12px;
    line-height: 14px;
  }
  .product-card-right-content .mobile-product-content {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
  }
  .product-modifiers-wrapper {
    margin-right: 40px;
  }
  .product-modifiers-content {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 4px;
  }
  .product-modifiers-item {
    font-size: 12px;
    line-height: 16px;
    font-family: var(--font-myriad-pro-semibold-condensed);
    color: var(--color-neutrals-800);
  }
  .mobile-product-content .product-content-wrapper {
    gap: 0px;
  }
  .recent-main-content .past-product-card-content {
    flex-direction: column;
    gap: 8px;
  }
  .product-image-wrapper {
    width: 120px;
    height: 120px;
  }
  .recent-main-content .product-category-text {
    line-height: 16px;
  }
  .recent-main-content .product-name-text {
    font-size: 18px;
    line-height: 20px;
  }
  .product-order-date {
    margin-top: 0;
    margin-bottom: 8px;
  }
}
.favorite-section-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}
.store-container {
  background-color: var(--color-white);
  border: 1px solid var(--color-neutrals-100);
  border-radius: 16px;
  padding: 20px;
  margin-top: 20px;
  overflow: auto;
}
.store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.store-details .store-name {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
}
.store-details .store-address,
.store-details .store-phone {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.store-distance {
  display: flex;
  align-items: center;
  gap: 12px;
}
.store-schedule {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.store-schedule-item {
  min-width: 256px;
}
.store-schedule-item p {
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.store-schedule-title {
  color: var(--color-neutrals-800);
  margin-bottom: 4px;
  line-height: 24px;
}
.store-hours {
  list-style: none;
  padding: 0;
  margin: 0;
}
.store-hour {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.store-hour p {
  font-size: 14px;
  color: var(--color-neutrals-500);
}
.store-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.store-footer-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.mobile-filters.favourite-section-filters {
  justify-content: flex-end;
}
@media (max-width: 1120px) {
  .favorite-section-wrapper {
    margin-bottom: 200px;
  }
  .favorite-section-wrapper .account-section-content-wrapper {
    padding: 20px;
    max-width: unset;
  }
}
@media (max-width: 768px) {
  .favorite-section-wrapper {
    margin-bottom: 0;
  }
  .favorite-section-wrapper .account-section-content-wrapper {
    padding: 16px;
  }
  .store-container {
    overflow: auto;
  }
  .account-section-content-wrapper .location-tab {
    margin-top: 0;
  }
  .store-header {
    flex-direction: column;
    align-items: normal;
    gap: 16px;
  }
  .store-distance {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .store-schedule-item {
    min-width: 100%;
  }
  .store-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .store-footer-buttons {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }
  .store-footer-buttons button {
    width: 100%;
  }
}
.inbox-section.account-section-content-wrapper {
  padding: 0;
}
.inbox-section .communications-header {
  padding: 40px 40px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.inbox-swiper-wrapper {
  position: relative;
  width: 100%;
}
.inbox-swiper {
  padding-top: 40px;
  padding-bottom: 40px;
}
.inbox-rewards-banner-card-wrapper {
  max-width: 100%;
  box-shadow: 0 0 12px 6px var(--color-neutrals-100);
  border-radius: 16px;
  border: unset;
  overflow: hidden;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.inbox-rewards-banner-card-image {
  padding: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: 300px;
}
.inbox-rewards-banner-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inbox-rewards-banner-card-content {
  padding: 24px;
}
.inbox-rewards-banner-card-offer-valid {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-400);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.inbox-rewards-banner-card-content-info-text h4 {
  font-size: 24px;
  line-height: 24px;
  color: var(--color-neutrals-800);
}
.inbox-rewards-banner-card-subtitle {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-500);
  margin-bottom: 4px;
}
.inbox-rewards-banner-card-description {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
  margin-bottom: 12px;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  transition: all 0.3s ease;
  cursor: pointer;
}
.inbox-rewards-banner-card-description.expanded {
  display: block;
  overflow: visible;
  line-clamp: unset;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
.inbox-empty-state {
  padding: 40px;
}
#inboxPrevRef,
#inboxNextRef {
  background: var(--color-white);
  color: var(--color-neutrals-800);
  border: 1px solid var(--color-neutrals-800);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#inboxPrevRef:hover,
#inboxNextRef:hover {
  background: var(--color-neutrals-800);
  color: var(--color-white);
}
.inbox-swiper .swiper-bullet {
  background-color: #3c3c3c3d;
}
.inbox-swiper .swiper-bullet-active {
  background-color: var(--color-neutrals-600);
}
@media (max-width: 768px) {
  .inbox-section .communications-header {
    padding: 16px 16px 0;
  }
  .inbox-swiper {
    padding-top: 16px;
    padding-bottom: 35px;
  }
  .inbox-empty-state {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--color-white);
    border-radius: 16px;
    margin: 16px 24px;
    border: 1px solid var(--color-neutrals-100);
    min-height: 104px;
  }
}
.payments {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.payments .account-section-content-wrapper {
  width: 400px;
}
.sections-description {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
  margin-bottom: 20px;
}
.dash-divider {
  border-bottom: 1px dashed var(--color-neutrals-100);
  margin: 20px 0;
}
.flex-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.account-gift-card-form .input-container {
  margin-bottom: 16px;
}
.account-gift-card-form-header {
  margin-bottom: 12px;
}
.account-gift-card-form-header h2 {
  padding: 0;
  text-align: start;
}
.account-gift-card-form-header p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
  padding-bottom: 7px;
}
.account-gift-card-form-footer {
  display: flex;
  align-self: center;
  gap: 8px;
  margin-top: 20px;
}
.account-gift-card-form-footer button {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
}
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.common-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-neutrals-100);
}
.common-card-selected {
  border: 1px solid var(--color-red-500);
}
.common-card-start-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.common-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue-50);
  color: var(--color-blue-500);
}
.common-card-title {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-800);
}
.common-card-description {
  font-size: 16px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
}
.common-card-end-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.common-card-badge {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue-50);
  color: var(--color-blue-600);
  font-size: 12px;
  line-height: 16px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  padding: 4px 12px;
  border-radius: 20px;
}
.common-card-delete-button {
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-neutrals-800);
  display: none;
}
.common-card:hover {
  border: 1px solid var(--color-red-100);
}
.common-card:hover .common-card-delete-button {
  display: block;
}
.common-card-delete-button:hover {
  color: var(--color-red-500);
  background: transparent;
}
.gift-cards-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 350px;
  overflow-y: auto;
}
.gift-cards-list .common-card-icon {
  background-color: var(--color-green-50);
  color: var(--color-green-600);
}
@media (max-width: 1140px) {
  .payments {
    display: block;
    margin-bottom: 200px;
  }
  .payments .account-section-content-wrapper {
    margin-bottom: 20px;
  }
}
@media (max-width: 768px) {
  .payments {
    display: block;
  }
  .payments .account-section-content-wrapper {
    min-width: 100%;
    margin-bottom: unset;
  }
  .account-section-content-wrapper .sections-title {
    font-size: 20px;
    line-height: 20px;
  }
  .account-section-content-wrapper .flex-column {
    flex-direction: row-reverse;
  }
  .account-section-content-wrapper .flex-column button {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
  }
  .account-gift-card-form {
    width: 100%;
  }
  .common-card {
    background-color: var(--color-white);
  }
  .common-card-delete-button {
    display: block;
  }
  .gift-cards-list {
    margin-bottom: 20px;
  }
}
.payments .delivery-error {
  margin: 20px 0;
}
.recent-section-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
}
.recent-main-content {
  width: 100%;
  height: fit-content;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.see-all-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
  border: none;
}
.see-all-btn:hover {
  color: var(--color-red-500);
  background: transparent;
}
.account-section-content-wrapper.filters-container {
  margin-right: -40px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  max-width: fit-content;
  width: 100%;
}
.filters-header {
  padding: 4px 8px 24px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--color-neutrals-100);
}
.filters-header p {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
}
.filters-count {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--color-red-500);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  line-height: 16px;
  color: var(--color-white);
}
.filters-options-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px dashed var(--color-neutrals-100);
}
.filters-options-container .custom-checkbox-icon {
  margin-top: 0;
}
.filters-options-text {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.filters-clear-btn,
.clear-btn {
  padding: 0;
  background: transparent;
  color: var(--color-red-500);
  border: none;
  text-decoration: underline;
  font-size: 16px;
  line-height: 24px;
  font-family: var(--font-myriad-pro-black-condensed);
}
.filters-clear-btn:hover,
.clear-btn:hover {
  color: var(--color-red-600);
  background: transparent;
}
.recent-card-container {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding-top: 20px;
  flex: 1;
  overflow-y: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.past-products-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  flex: 1;
  overflow-y: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.mobile-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.mobile-filter-header {
  padding: 0 16px;
  margin-top: 24px;
}
.mobile-filter-header h2 {
  text-align: left;
  padding: 0;
}
.mobile-filter-modal-content .filters-options-container {
  padding: 0 16px;
  border-bottom: unset;
}
.mobile-filter-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  box-shadow: 0 0 20px 4px #d8d8d852;
}
.mobile-filter-buttons button {
  flex: 1;
  font-size: 16px;
  line-height: 24px;
}
.see-all-btns-wrapper {
  display: flex;
  align-items: center;
  gap: 20px;
}
.recents-loading-state,
.recents-error-state,
.recents-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  min-height: 300px;
  background-color: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--color-neutrals-100);
}
.recents-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-neutrals-200);
  border-top: 3px solid var(--color-primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}
.recents-loading-text {
  font-size: 16px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-regular);
  margin: 0;
}
.recents-error-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.recents-error-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-neutrals-800);
  margin: 0 0 8px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.recents-error-message {
  font-size: 14px;
  color: var(--color-neutrals-600);
  margin: 0 0 24px;
  font-family: var(--font-myriad-pro-regular);
  max-width: 400px;
  line-height: 1.5;
}
.recents-retry-button {
  background-color: var(--color-primary-500);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.recents-retry-button:hover {
  background-color: var(--color-primary-600);
}
.recents-retry-button:active {
  background-color: var(--color-primary-700);
}
.recents-empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.7;
}
.recents-empty-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-neutrals-800);
  margin: 0 0 8px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.recents-empty-message {
  font-size: 14px;
  color: var(--color-neutrals-600);
  margin: 0;
  font-family: var(--font-myriad-pro-regular);
  max-width: 400px;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .recents-loading-state,
  .recents-error-state,
  .recents-empty-state {
    padding: 40px 16px;
    min-height: 250px;
  }
  .recents-loading-spinner {
    width: 32px;
    height: 32px;
    border-width: 2px;
  }
  .recents-error-icon,
  .recents-empty-icon {
    font-size: 40px;
  }
  .recents-error-title,
  .recents-empty-title {
    font-size: 18px;
  }
  .recents-error-message,
  .recents-empty-message {
    font-size: 13px;
  }
  .past-products-container {
    gap: 16px;
  }
  .see-all-btns-wrapper {
    justify-content: space-between;
  }
}
.redeem-code-modal {
  max-width: 452px;
}
.redeem-code-modal-top {
  padding: 24px 24px 16px;
}
.redeem-code-modal-top .dashed-line {
  margin: 20px 0;
}
.redeem-code-modal-title-container {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.redeem-code-modal-title-image {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.redeem-code-modal-title-image img,
.redeem-code-modal-title-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.redeem-code-modal-title {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.redeem-code-modal-title-description,
.redeem-code-modal-code-description {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-align: center;
}
.redeem-code-modal-title-description {
  font-size: 22px;
}
.redeem-code-modal-code-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 0;
}
.redeem-code-modal-code {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-neutrals-800);
  margin: 0;
}
.redeem-code-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--color-neutrals-100);
}
.redeem-code-modal-footer p {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.redeem-code-modal-footer h5 {
  font-size: 24px;
  line-height: 24px;
  color: var(--color-red-600);
}
@media (max-width: 768px) {
  .redeem-code-modal-top {
    padding: 20px 16px;
  }
  .redeem-code-modal-title {
    font-size: 28px;
    line-height: 28px;
  }
  .redeem-code-modal-code-container {
    gap: 8px;
  }
  .redeem-code-modal-code {
    font-size: 40px;
    line-height: 40px;
  }
  .redeem-code-modal-footer h5 {
    font-size: 20px;
    line-height: 20px;
  }
  .redeem-code-modal-top .dashed-line {
    margin: 16px 0;
  }
}
.redeem-code-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}
.redeem-code-modal-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-neutrals-200);
  border-top: 3px solid var(--color-red-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
  margin-right: 0;
}
.redeem-code-modal-loading p {
  font-size: 16px;
  color: var(--color-neutrals-600);
  margin: 0;
}
.redeem-code-modal-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
}
.redeem-code-modal-error h4 {
  font-size: 20px;
  color: var(--color-red-600);
  margin: 0 0 12px;
}
.redeem-code-modal-error p {
  font-size: 16px;
  color: var(--color-neutrals-600);
  margin: 0 0 20px;
}
.redeem-code-modal-error button {
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.redeem-code-modal-error button:hover {
  background-color: var(--color-primary-dark);
}
.copy-code-button-inline {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  border-radius: unset;
  color: var(--color-neutrals-500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.copy-code-button-inline:hover {
  background-color: transparent;
  color: var(--color-neutrals-800);
}
.copy-code-button-inline:active {
  transform: translateY(1px);
}
.rewards-slider {
  width: 100%;
  position: relative;
  display: grid;
}
.rewards-swiper {
  padding: 20px 20px 40px;
  width: 100%;
}
.rewards-swiper .swiper-bullet {
  background-color: #3c3c3c3d;
}
.rewards-swiper .swiper-slide {
  width: fit-content;
}
.rewards-swiper .swiper-bullet-active {
  background-color: var(--color-neutrals-600);
}
.rewards-swiper .rewards-banner-card-image {
  max-height: 320px;
  max-width: 320px;
}
.rewards-swiper .rewards-banner-card-wrapper {
  height: auto;
  max-height: unset;
}
.rewards-empty-state {
  padding: 20px;
  border-radius: 16px;
  background-color: var(--color-yellow-100);
}
.rewards-empty-state-content {
  padding: 20px;
  border-radius: 16px;
  border: 2px dashed var(--color-yellow-600);
  display: flex;
  align-items: center;
  gap: 20px;
}
.rewards-empty-state-content-text h3 {
  color: var(--color-neutrals-800);
  font-size: 28px;
  line-height: 28px;
}
.rewards-empty-state-content-image {
  max-width: 150px;
  max-height: 150px;
}
.rewards-empty-state-content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.desktop-banner-card .rewards-banner-card-image {
  max-height: 150px;
}
.rewards-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.rewards-banner-card-content-tooltip {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rewards-banner-card-content-tooltip h4 {
  font-size: 16px;
  line-height: 20px;
}
.rewards-banner-card-offer-valid-date {
  font-size: 14px;
  line-height: 16px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.rewards-banner-card-content button {
  width: 100%;
}
.redeem-online-modal .confirmation-modal-header h2 {
  font-size: 40px;
  line-height: 40px;
  max-width: calc(100% - 110px);
}
.redeem-online-modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.redeem-online-modal-description {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.redeem-online-modal-description p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-align: center;
}
.rewards-page {
  background-color: var(--color-white);
}
.account-rewards-page {
  width: 100%;
  background-color: var(--color-white);
}
.rewards-benefits-container,
.rewards-points-container {
  padding: 60px 80px;
  background-image: url(/images/account-bg-CJ3xRhfr.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.rewards-hero-container {
  display: flex;
  flex-direction: column;
  gap: 60px;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}
.rewards-hero-container .rewards-how-it-works-container {
  padding: 0 40px 40px;
}
.rewards-hero-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  padding: 110px 40px 0;
}
.rewards-how-it-works-container .catering-rewards-content {
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}
.rewards-hero-content-left {
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-right: 80px;
}
.rewards-hero-content-header h2 {
  font-size: 96px;
  line-height: 96px;
  color: var(--color-neutrals-800);
  position: relative;
  width: max-content;
}
.rewards-hero-content-header h2 sup {
  font-size: 20px;
  line-height: 20px;
  vertical-align: text-top;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.rewards-hero-content-header h2 span {
  position: absolute;
  color: var(--color-red-500);
  transform: rotate(-4deg);
  font-family: var(--font-hollie-script);
  font-size: 64px;
  line-height: 64px;
  bottom: -36px;
  right: -70px;
}
.rewards-hero-content-buttons-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rewards-hero-content-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rewards-hero-content-buttons-wrapper p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.rewards-hero-content-buttons-wrapper p button {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--color-neutrals-600);
  text-decoration: underline;
  cursor: pointer;
}
.rewards-hero-content-buttons-wrapper p button:hover {
  color: var(--color-red-500);
}
.rewards-hero-content-right {
  padding: 24px 44px;
  border-radius: 16px;
  background: var(--color-yellow-300);
  max-width: 620px;
  max-height: 288px;
  overflow: hidden;
}
.rewards-banner-content-wrapper {
  display: flex;
  align-items: center;
  gap: 38px;
}
.rewards-swiper-wrapper {
  flex: 1;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 16px;
  position: relative;
  max-width: max-content;
}
.rewards-banner-content {
  flex: 1;
  padding-left: 24px;
}
.rewards-banner-content h2 {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-neutrals-800);
  min-width: 292px;
}
.rewards-banner-content p {
  font-family: var(--font-hollie-script);
  font-size: 40px;
  line-height: 40px;
  color: var(--color-red-500);
  transform: rotate(-4deg);
  margin-left: -24px;
}
.rewards-rules-container {
  padding: 60px 80px 32px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rewards-rules-title {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-neutrals-800);
}
.rewards-rules-title sup {
  font-size: 28px;
  line-height: 28px;
  vertical-align: text-top;
}
.rewards-rules-steps-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 24px;
  grid-template-areas: 'step1 step3' 'step2 step4';
}
.rewards-rules-step {
  padding: 0 16px;
  display: flex;
  gap: 16px;
}
.rewards-rules-step:nth-child(1) {
  grid-area: step1;
}
.rewards-rules-step:nth-child(2) {
  grid-area: step2;
}
.rewards-rules-step:nth-child(3) {
  grid-area: step3;
}
.rewards-rules-step:nth-child(4) {
  grid-area: step4;
}
.rewards-rules-step-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rewards-rules-step-number {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red-500);
  color: var(--color-white);
  border-radius: 50%;
  font-family: var(--font-sink);
  font-size: 20px;
  line-height: 20px;
  flex-shrink: 0;
}
.rewards-rules-step-title,
.rewards-rules-step-title h5 {
  font-family: var(--font-sink);
  font-size: 24px;
  line-height: 24px;
  color: var(--color-neutrals-700);
}
.rewards-rules-step-description p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.rewards-rules-footer {
  background-image: url(/assets/container-JfvIRmWs.webp);
  background-size: cover;
  background-position: center;
  max-width: 1062px;
  width: 100%;
  border-radius: 16px;
  margin: 0 auto 60px;
  display: flex;
  overflow: hidden;
}
.rewards-rules-footer-content {
  width: 50%;
  padding: 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rewards-rules-footer-image {
  flex: 1;
  max-height: 316px;
}
.rewards-rules-footer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rewards-rules-footer-content-text,
.rewards-rules-footer-question-link-wrapper p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.rewards-rules-footer-content-text a {
  color: var(--color-neutrals-800);
}
.rewards-rules-footer-question-link-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rewards-rules-footer-question-link-wrapper button {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-neutrals-800);
  text-decoration: underline;
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 16px;
  line-height: 24px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.rewards-rules-footer-question-link-wrapper button svg {
  transform: rotate(320deg);
}
.rewards-rules-footer-content-text a:hover,
.rewards-rules-footer-question-link-wrapper button:hover {
  color: var(--color-red-500);
}
.rewards-points-container {
  padding: 40px;
}
.account-rewards-page .rewards-points-container {
  padding: 0;
}
.rewards-points-inner-container {
  width: 100%;
  display: flex;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  justify-content: center;
}
.rewards-progress-container,
.rewards-points-content {
  border: 1px solid var(--color-neutrals-100);
  background-color: var(--color-white);
  border-radius: 20px;
}
.rewards-progress-container {
  display: flex;
  flex-shrink: 0;
  padding: 40px 16px 0;
  align-items: flex-end;
}
.rewards-points-content {
  flex: 1;
  padding: 40px;
  max-width: fit-content;
}
.rewards-points-content .dashed-line {
  margin: 20px 0;
}
.rewards-points-content-title {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.rewards-points-content-title sup {
  font-size: 12px;
  line-height: 12px;
  vertical-align: top;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.rewards-points-content-title span {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-red-600);
  font-family: var(--font-hollie-script);
}
.rewards-points-card-container {
  display: flex;
  gap: 16px;
}
.rewards-points-card-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rewards-points-card-wrapper .account-referral-banner {
  margin-top: 0;
}
.reward-point-card {
  padding: 32px;
  border-radius: 20px;
  border: 1px solid var(--color-neutrals-100);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.reward-point-card button {
  max-width: 500px;
  width: 100%;
  margin: auto;
}
.reward-point-card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.reward-point-card-content h2 {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-red-600);
  display: flex;
  align-items: center;
  gap: 12px;
}
.reward-point-card-content h2 span {
  font-size: 24px;
  line-height: 32px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.reward-point-card-content-description {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.rewards-banner-card-wrapper {
  height: 270px;
  background: var(--color-yellow-100);
  width: 100%;
  border-radius: 20px;
  border: 1px solid #fee9c5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 20px 4px #d8d8d852;
  max-height: 270px;
}
.rewards-swiper-wrapper-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  height: max-content;
}
.rewards-banner-card-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rewards-banner-card-image.rewards-product-card {
  padding: 24px;
  background-color: var(--color-yellow-300);
}
.rewards-banner-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: -webkit-fill-available;
}
.rewards-banner-card-wrapper.desktop-banner-card .rewards-banner-card-image {
  flex-direction: column;
  background-color: var(--color-red-400);
}
.rewards-banner-card-image h2 {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-white);
  text-transform: uppercase;
}
.rewards-banner-card-image h4 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-white);
  text-transform: uppercase;
}
.rewards-banner-card-content {
  margin-top: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.rewards-banner-card-content .reward-product-card-price h3 {
  font-size: 32px;
  line-height: 32px;
}
.rewards-banner-card-content-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rewards-banner-card-offer-valid {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-400);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.rewards-banner-card-content-info-text h4 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.rewards-banner-card-content-info-text p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.present-store-modal .confirmation-modal-header h2 {
  font-size: 40px;
  line-height: 40px;
  max-width: calc(100% - 110px);
}
.present-store-modal .modal-character-logo {
  width: 140px;
  height: 190px;
}
.redeem-modal-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.redeem-modal-buttons button {
  width: 100%;
}
.catering-rewards-content-item button {
  font-size: 14px;
  line-height: 20px;
  height: 32px;
  margin-bottom: 8px;
  width: 100%;
}
.rewards-banner-card-content-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.rewards-banner-card-content-buttons button {
  font-size: 16px;
  line-height: 24px;
  width: 100%;
}
.rewards-banner-image {
  max-width: 196px;
  flex-shrink: 0;
}
.rewards-banner-image img {
  width: 100%;
  height: 100%;
}
.account-rewards-page .rewards-points-container {
  background: unset;
}
.account-rewards-page .rewards-points-inner-container {
  max-width: 100%;
  justify-content: unset;
}
.rewards-swiper-wrapper-mobile {
  display: none;
}
@media (max-width: 768px) {
  .rewards-hero-container .rewards-how-it-works-container {
    padding: 40px 16px;
  }
  .rewards-how-it-works-container .catering-rewards-content {
    padding: 0;
  }
  .rewards-hero-container {
    gap: 0;
  }
  .rewards-hero-content {
    padding: 8px 16px 0;
    justify-content: start;
    gap: 10px;
  }
  .rewards-hero-content-header h2 {
    font-size: 40px;
    line-height: 40px;
  }
  .rewards-hero-content-header h2 sup {
    font-size: 16px;
    line-height: 16px;
  }
  .rewards-hero-content-header h2 span {
    font-size: 32px;
    line-height: 32px;
    bottom: -16px;
    right: -75px;
  }
  .rewards-hero-content-right {
    padding: 16px;
    max-height: unset;
    max-width: unset;
    width: 100%;
  }
  .rewards-hero-content-buttons-wrapper {
    padding: 24px 16px 16px;
  }
  .rewards-hero-content-buttons {
    flex-direction: column;
  }
  .rewards-hero-content-buttons button {
    width: 100%;
  }
  .rewards-banner-content-wrapper {
    flex-direction: column-reverse;
    gap: 20px;
  }
  .rewards-banner-image img {
    margin-bottom: -24px;
  }
  .rewards-banner-content {
    padding-left: 0;
    text-align: center;
  }
  .rewards-banner-content p {
    font-size: 32px;
    line-height: 32px;
    margin-left: -50px;
  }
  .rewards-banner-content h2 {
    font-size: 32px;
    line-height: 32px;
    max-width: unset;
  }
  .rewards-benefits-container,
  .rewards-rules-container {
    padding: 40px 16px;
  }
  .rewards-rules-steps-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'step1' 'step2' 'step3' 'step4';
    gap: 16px;
  }
  .rewards-rules-title {
    font-size: 40px;
    line-height: 40px;
  }
  .rewards-rules-title sup {
    font-size: 16px;
    line-height: 16px;
  }
  .rewards-rules-step {
    padding: 0;
    gap: 12px;
  }
  .rewards-rules-step-number {
    width: 40px;
    height: 40px;
    font-size: 16px;
    line-height: 16px;
  }
  .rewards-rules-step-title,
  .rewards-rules-step-title h5 {
    font-size: 20px;
    line-height: 20px;
  }
  .rewards-rules-footer {
    border-radius: 0;
    margin: 0;
  }
  .rewards-rules-footer-content {
    width: 100%;
    padding: 40px 16px;
    gap: 16px;
  }
  .rewards-points-container {
    padding: 8px 16px 16px;
    background: var(--color-white);
  }
  .rewards-points-container .mobile-account-referral-banner {
    padding: 20px 0 0;
  }
  .rewards-hero-content-header {
    margin-top: 16px;
    margin-bottom: 20px;
  }
  .rewards-progress-container {
    max-height: 250px;
    overflow: hidden;
    width: 167px;
    padding: 16px 0 0;
    align-items: flex-start;
  }
  .rewards-progress-container svg {
    width: 100%;
    height: 305px;
  }
  .rewards-points-inner-container {
    margin-top: 36px;
    gap: 8px;
  }
  .rewards-points-content {
    padding: 0 !important;
    border: none;
    max-width: 100%;
  }
  .reward-point-card {
    padding: 16px;
    gap: 8px;
  }
  .reward-point-card-content h2 {
    font-size: 28px;
    line-height: 28px;
    gap: 8px;
  }
  .reward-point-card-content h2 span,
  .reward-point-card button {
    font-size: 16px;
    line-height: 24px;
  }
  .reward-point-card-content-description {
    font-size: 12px;
    line-height: 16px;
    gap: 4px;
    margin: 0 -16px;
  }
  .reward-point-card button {
    padding: 4px 0;
  }
  .rewards-points-card-wrapper {
    gap: 8px;
    max-width: unset;
  }
  .rewards-banner-card-content-info-text h4 {
    font-size: 28px;
    line-height: 28px;
  }
  .present-store-modal .confirmation-modal-header h2 {
    font-size: 32px;
    line-height: 32px;
  }
  .rewards-points-content-title {
    font-size: 28px;
    line-height: 28px;
  }
  .rewards-points-content-title span {
    font-size: 30px;
    line-height: 30px;
  }
  .rewards-swiper-wrapper-mobile {
    display: block;
  }
  .rewards-swiper-wrapper-mobile.rewards-swiper-wrapper-empty {
    padding: 16px 0;
  }
  .rewards-banner-card-content-buttons {
    flex-wrap: wrap;
  }
}
@media (max-width: 1320px) {
  .account-rewards-page
    .rewards-hero-container
    .rewards-how-it-works-container {
    padding: 40px 16px;
  }
  .account-rewards-page
    .rewards-how-it-works-container
    .catering-rewards-content {
    padding: 0;
  }
  .account-rewards-page .rewards-hero-container {
    gap: 0;
  }
  .account-rewards-page .rewards-hero-content {
    padding: 8px 16px 0;
    justify-content: start;
    gap: 10px;
  }
  .account-rewards-page .rewards-hero-content-header h2 {
    font-size: 40px;
    line-height: 40px;
  }
  .account-rewards-page .rewards-hero-content-header h2 sup {
    font-size: 16px;
    line-height: 16px;
  }
  .account-rewards-page .rewards-hero-content-header h2 span {
    font-size: 32px;
    line-height: 32px;
    bottom: -16px;
    right: -75px;
  }
  .account-rewards-page .rewards-hero-content-right {
    padding: 16px;
    max-height: unset;
    max-width: unset;
    width: 100%;
  }
  .account-rewards-page .rewards-hero-content-buttons-wrapper {
    padding: 24px 16px 16px;
  }
  .account-rewards-page .rewards-hero-content-buttons {
    flex-direction: column;
  }
  .account-rewards-page .rewards-hero-content-buttons button {
    width: 100%;
  }
  .account-rewards-page .rewards-banner-content-wrapper {
    flex-direction: column-reverse;
    gap: 20px;
  }
  .account-rewards-page .rewards-banner-image img {
    margin-bottom: -24px;
  }
  .account-rewards-page .rewards-banner-content {
    padding-left: 0;
    text-align: center;
  }
  .account-rewards-page .rewards-banner-content p {
    font-size: 32px;
    line-height: 32px;
    margin-left: -50px;
  }
  .account-rewards-page .rewards-banner-content h2 {
    font-size: 32px;
    line-height: 32px;
    max-width: unset;
  }
  .account-rewards-page .rewards-benefits-container,
  .account-rewards-page .rewards-rules-container {
    padding: 40px 16px;
  }
  .account-rewards-page .rewards-rules-steps-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'step1' 'step2' 'step3' 'step4';
    gap: 16px;
  }
  .account-rewards-page .rewards-rules-title {
    font-size: 40px;
    line-height: 40px;
  }
  .account-rewards-page .rewards-rules-title sup {
    font-size: 16px;
    line-height: 16px;
  }
  .account-rewards-page .rewards-rules-step {
    padding: 0;
    gap: 12px;
  }
  .account-rewards-page .rewards-rules-step-number {
    width: 40px;
    height: 40px;
    font-size: 16px;
    line-height: 16px;
  }
  .account-rewards-page .rewards-rules-step-title,
  .account-rewards-page .rewards-rules-step-title h5 {
    font-size: 20px;
    line-height: 20px;
  }
  .account-rewards-page .rewards-rules-footer {
    border-radius: 0;
    margin: 0;
  }
  .account-rewards-page .rewards-rules-footer-content {
    width: 100%;
    padding: 40px 16px;
    gap: 16px;
  }
  .account-rewards-page .rewards-points-container {
    padding: 8px 16px 0;
    background: #fff;
  }
  .account-rewards-page .rewards-hero-content-header {
    margin-top: 16px;
    margin-bottom: 20px;
  }
  .account-rewards-page .rewards-progress-container {
    overflow: hidden;
    width: 167px;
    padding: 16px 0 0;
    align-items: flex-end;
  }
  .account-rewards-page .rewards-progress-container svg {
    width: 100%;
    height: 305px;
  }
  .account-rewards-page .rewards-points-inner-container {
    gap: 8px;
  }
  .account-rewards-page .reward-point-card {
    padding: 16px;
    gap: 8px;
  }
  .account-rewards-page .reward-point-card-content h2 {
    font-size: 28px;
    line-height: 28px;
    gap: 8px;
  }
  .account-rewards-page .reward-point-card-content h2 span,
  .account-rewards-page .reward-point-card button {
    font-size: 16px;
    line-height: 24px;
  }
  .account-rewards-page .reward-point-card-content-description {
    font-size: 12px;
    line-height: 16px;
    gap: 4px;
    margin: 0 -16px;
  }
  .account-rewards-page .reward-point-card button {
    padding: 4px 0;
  }
  .account-rewards-page .rewards-points-card-wrapper {
    gap: 8px;
    max-width: unset;
  }
  .account-rewards-page .rewards-banner-card-content-info-text h4 {
    font-size: 28px;
    line-height: 28px;
  }
  .account-rewards-page .present-store-modal .confirmation-modal-header h2 {
    font-size: 32px;
    line-height: 32px;
  }
  .account-rewards-page .rewards-points-content-title {
    font-size: 28px;
    line-height: 28px;
  }
  .account-rewards-page .rewards-points-content-title span {
    font-size: 30px;
    line-height: 30px;
  }
  .account-rewards-page .rewards-points-content {
    padding: 20px;
  }
  .rewards-swiper-wrapper {
    display: none;
  }
  .rewards-swiper-wrapper-mobile {
    display: block;
  }
  .rewards-points-inner-container {
    max-width: 100%;
  }
  .rewards-swiper-wrapper-mobile.rewards-swiper-wrapper-empty {
    padding: 16px 0 0;
  }
}
@media (max-width: 1610px) {
  .account-rewards-page .rewards-swiper-wrapper {
    display: none;
  }
  .account-rewards-page .rewards-swiper-wrapper-mobile {
    display: block;
  }
  .account-rewards-page
    .rewards-swiper-wrapper-mobile.rewards-swiper-wrapper-empty {
    padding: 16px 0;
  }
}
@media (max-width: 930px) {
  .rewards-hero-container .rewards-how-it-works-container {
    padding: 40px 16px;
  }
  .rewards-how-it-works-container .catering-rewards-content {
    padding: 0;
  }
  .rewards-hero-container {
    gap: 0;
  }
  .rewards-hero-content {
    padding: 8px 16px 0;
    justify-content: start;
    gap: 10px;
  }
  .rewards-hero-content-header h2 {
    font-size: 40px;
    line-height: 40px;
  }
  .rewards-hero-content-header h2 sup {
    font-size: 16px;
    line-height: 16px;
  }
  .rewards-hero-content-header h2 span {
    font-size: 32px;
    line-height: 32px;
    bottom: -16px;
    right: -75px;
  }
  .rewards-hero-content-right {
    padding: 16px;
    max-height: unset;
    max-width: unset;
    width: 100%;
  }
  .rewards-hero-content-buttons-wrapper {
    padding: 24px 16px 16px;
  }
  .rewards-hero-content-buttons {
    flex-direction: column;
  }
  .rewards-hero-content-buttons button {
    width: 100%;
  }
  .rewards-banner-content-wrapper {
    flex-direction: column-reverse;
    gap: 20px;
  }
  .rewards-banner-image img {
    margin-bottom: -24px;
  }
  .rewards-banner-content {
    padding-left: 0;
    text-align: center;
  }
  .rewards-banner-content p {
    font-size: 32px;
    line-height: 32px;
    margin-left: -50px;
  }
  .rewards-banner-content h2 {
    font-size: 32px;
    line-height: 32px;
    max-width: unset;
  }
  .rewards-benefits-container,
  .rewards-rules-container {
    padding: 40px 16px;
  }
  .rewards-rules-steps-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: 'step1' 'step2' 'step3' 'step4';
    gap: 16px;
  }
  .rewards-rules-title {
    font-size: 40px;
    line-height: 40px;
  }
  .rewards-rules-title sup {
    font-size: 16px;
    line-height: 16px;
  }
  .rewards-rules-step {
    padding: 0;
    gap: 12px;
  }
  .rewards-rules-step-number {
    width: 40px;
    height: 40px;
    font-size: 16px;
    line-height: 16px;
  }
  .rewards-rules-step-title,
  .rewards-rules-step-title h5 {
    font-size: 20px;
    line-height: 20px;
  }
  .rewards-rules-footer {
    border-radius: 0;
    margin: 0;
  }
  .rewards-rules-footer-content {
    width: 100%;
    padding: 40px 16px;
    gap: 16px;
  }
  .rewards-hero-content-header {
    margin-top: 16px;
    margin-bottom: 20px;
  }
  .rewards-progress-container {
    overflow: hidden;
    width: 167px;
    padding: 16px 0 0;
    align-items: flex-end;
  }
  .rewards-progress-container svg {
    width: 100%;
    height: 305px;
  }
  .rewards-points-inner-container {
    gap: 8px;
  }
  .reward-point-card {
    padding: 16px;
    gap: 8px;
  }
  .reward-point-card-content h2 {
    font-size: 28px;
    line-height: 28px;
    gap: 8px;
  }
  .reward-point-card-content h2 span,
  .reward-point-card button {
    font-size: 16px;
    line-height: 24px;
  }
  .reward-point-card-content-description {
    font-size: 12px;
    line-height: 16px;
    gap: 4px;
    margin: 0 -16px;
  }
  .reward-point-card button {
    padding: 4px 0;
  }
  .rewards-points-card-wrapper {
    gap: 8px;
    max-width: unset;
  }
  .rewards-banner-card-content-info-text h4 {
    font-size: 28px;
    line-height: 28px;
  }
  .present-store-modal .confirmation-modal-header h2 {
    font-size: 32px;
    line-height: 32px;
  }
  .rewards-points-content-title {
    font-size: 28px;
    line-height: 28px;
  }
  .rewards-points-content-title span {
    font-size: 30px;
    line-height: 30px;
  }
}
@media (min-width: 769px) and (max-width: 950px) {
  .account-rewards-page .rewards-points-container {
    padding: 0;
  }
  .account-rewards-page .account-referral-section {
    padding: 12px 10px 12px 12px;
  }
  .account-rewards-page .account-referral-section h2 {
    font-size: 18px;
  }
  .account-rewards-page .account-referral-code {
    font-size: 16px;
  }
  .account-rewards-page .referral-banner-content h2 {
    font-size: 18px;
  }
  .account-rewards-page .referral-banner-content p {
    font-size: 14px;
  }
}
.reward-history-section .dashed-line {
  margin: 20px 0;
}
.reward-history-items-container {
  margin-top: 20px;
}
.reward-history-section {
  max-height: 750px;
  overflow-y: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.timeline-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  align-items: flex-start;
}
.timeline-date {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.timeline-vertical-line {
  width: 2px;
  flex: 1;
  background-color: var(--color-red-500);
}
.date-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--color-white);
  background-color: var(--color-red-500);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 20px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-align: center;
  border: 2px solid var(--color-red-500);
}
.reward-item-card:not(.last-reward-item) {
  margin-bottom: 32px;
}
.reward-title {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
  text-transform: capitalize;
}
.reward-title-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.reward-title-wrapper svg {
  color: var(--color-red-500);
}
.reward-subtitle {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-400);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.reward-points-subtitle {
  color: var(--color-green-500);
  font-family: var(--font-myriad-pro-black-condensed);
}
.reward-description {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.reward-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.stat {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}
.loading-message,
.empty-message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  font-size: 16px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.loading-message {
  color: var(--color-neutrals-400);
}
.account-page {
  background-color: var(--color-white);
}
.account-container {
  position: relative;
  overflow: hidden;
  display: flex;
  flex: 1;
}
.account-content {
  flex: 1;
  padding: 40px;
  width: 100%;
  overflow: hidden;
}
.account-character-bg {
  position: absolute;
  color: var(--color-neutrals-200);
  transform: rotate(-10deg);
  bottom: -90px;
  right: -30px;
}
.account-section-content-wrapper {
  padding: 40px;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 20px;
  background-color: var(--color-white);
  max-width: 736px;
}
.sections-title {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
  padding: 0;
  text-align: start;
  text-transform: capitalize;
}
.account-referral-section,
.referral-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.referral-banner-content {
  padding: 10px 20px;
}
.referral-banner-content,
.communications-banner-content {
  background-color: var(--color-yellow-300);
  clip-path: polygon(
    100% 0,
    0 0,
    6px 5.56%,
    0 11.11%,
    6px 16.67%,
    0 22.22%,
    6px 27.78%,
    0 33.33%,
    6px 38.89%,
    0 44.44%,
    6px 50%,
    0 55.56%,
    6px 61.11%,
    0 66.67%,
    6px 72.22%,
    0 77.78%,
    6px 83.33%,
    0 88.89%,
    6px 94.44%,
    0 100%,
    100% 100%
  );
}
.referral-banner-content h2,
.communications-banner-content h2 {
  color: var(--color-red-600);
  padding: 0;
  text-align: start;
  line-height: 24px;
}
.referral-banner-content h2 svg,
.communications-banner-content h2 svg {
  margin-left: 8px;
  vertical-align: middle;
}
.referral-banner-content p,
.communications-banner-content p {
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 16px;
  line-height: 24px;
}
.mobile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-neutrals-100);
  padding: 12px 16px;
  background-color: var(--color-white);
}
.mobile-header-start,
.mobile-header-end {
  flex: 1;
  flex-shrink: 0;
}
.mobile-header-end {
  text-align: end;
}
.mobile-back-button,
.mobile-edit-button {
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-neutrals-800);
  height: 40px;
  width: 40px;
}
.mobile-back-button:hover,
.mobile-edit-button:hover {
  background: transparent;
}
.mobile-header-title {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-800);
  flex: 2;
  text-align: center;
}
.delete-account-modal-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.delete-account-modal-description {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.delete-account-modal-description h5 {
  font-size: 24px;
  line-height: 24px;
  color: var(--color-neutrals-800);
}
.delete-account-modal-description p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-align: center;
}
.delete-account-modal-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}
.delete-account-modal-buttons button {
  font-size: 16px;
  line-height: 24px;
  width: 100%;
}
.delete-account-error {
  color: #d32f2f;
  background-color: #ffebee;
  padding: 12px;
  border-radius: 4px;
  margin-top: 12px;
  font-size: 14px;
  text-align: center;
}
@media (max-width: 768px) {
  .account-page {
    height: 100%;
  }
  .mobile-content {
    min-height: calc(100vh - 65px);
  }
  .account-side-bar {
    max-width: 100%;
    border-right: none;
  }
  .account-section-content-wrapper {
    padding: 16px;
    border: unset;
    border-radius: unset;
    background-color: unset;
  }
  .communications-banner-content {
    padding: 18px 16px;
    width: calc(100% + 16px) !important;
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: 16px;
    position: static;
    clip-path: polygon(
      0 0,
      100% 0,
      calc(100% - 6px) 6.25%,
      100% 12.5%,
      calc(100% - 6px) 18.75%,
      100% 25%,
      calc(100% - 6px) 31.25%,
      100% 37.5%,
      calc(100% - 6px) 43.75%,
      100% 50%,
      calc(100% - 6px) 56.25%,
      100% 62.5%,
      calc(100% - 6px) 68.75%,
      100% 75%,
      calc(100% - 6px) 81.25%,
      100% 87.5%,
      calc(100% - 6px) 93.75%,
      100% 100%,
      0 100%
    );
  }
  .communications-banner-content h2 svg {
    margin-left: -16px;
    transform: rotate(300deg);
    margin-top: 16px;
    margin-right: 6px;
  }
  .communications-banner-content.points-banner {
    align-items: center;
    gap: 8px;
  }
  .points-banner h2 {
    max-width: 123px;
  }
  .points-banner img {
    width: 48px;
  }
  .delete-account-modal-description {
    align-items: start;
  }
  .delete-account-modal-description p {
    text-align: left;
  }
  .delete-account-modal-buttons {
    flex-direction: column;
    gap: 12px;
  }
}
@media (max-width: 1024px) {
  .account-content {
    padding: 20px;
  }
}
.breadcrumbs-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.breadcrumbs-list {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1 auto;
}
.breadcrumbs-back-button {
  padding: 0;
  background: none;
  color: var(--color-neutrals-500);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.breadcrumbs-back-button:hover {
  background: none;
  color: var(--color-neutrals-800);
}
.breadcrumbs-text {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-500);
}
.breadcrumb-item {
  cursor: pointer;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
  text-decoration: none;
}
.breadcrumb-item:hover {
  color: var(--color-red-500);
}
.breadcrumb-item-active {
  cursor: pointer;
  color: var(--color-neutrals-800);
  font-family: var(--font-sink);
  text-decoration: none;
  line-height: normal;
}
.breadcrumb-item-active:hover {
  color: var(--color-neutrals-800);
}
.breadcrumb-separator {
  margin: 0 8px;
  color: var(--color-neutrals-500);
}
.breadcrumb-item-wrapper button {
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.breadcrumb-item-wrapper button:hover {
  background: none;
}
@media (max-width: 768px) {
  .breadcrumbs-text {
    font-size: 16px;
    line-height: 24px;
  }
  .breadcrumbs-container {
    margin-bottom: 20px;
    width: 100%;
    gap: 8px;
  }
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-vertical > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.modifier-card {
  padding: 16px;
  border: 1px solid transparent;
  border: 1px solid var(--color-yellow-500);
  border-radius: 16px;
  cursor: pointer;
  background: var(--color-white);
  width: 180px;
  position: relative;
  height: 156px;
  transition:
    transform 0.1s ease-in-out,
    border-color 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
  transform: scale(1);
  display: block;
  touch-action: pan-y pan-x;
  user-select: none;
  -webkit-user-select: none;
}
.modifier-card-input {
  position: absolute;
  opacity: 0;
  width: 44px;
  height: 44px;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  touch-action: pan-y pan-x;
  pointer-events: auto;
  z-index: 2;
}
.modifier-card.modifier-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modifier-card.modifier-disabled:hover {
  transform: none;
  border: 1px solid var(--color-yellow-500);
  box-shadow: none;
}
.modifier-card:hover,
.modifier-card.selected {
  border-color: var(--color-red-500);
  box-shadow: 0 0 20px 4px #d8d8d852;
}
.modifier-card:has(.modifier-card-input:focus-visible) {
  border-color: var(--color-blue-500) !important;
}
.modifier-card:not(.modifier-disabled):has(.modifier-card-input:active) {
  transform: scale(0.9);
}
.modifier-card-selection {
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 16px;
}
.modifier-card-selection .custom-checkbox-icon {
  margin: 0;
  border-radius: 4px;
  border: 2px solid var(--color-neutrals-600);
  min-width: 22px;
  min-height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  padding: 2px;
  color: var(--color-white);
}
.modifier-card-selection .custom-checkbox-icon.radio {
  border-radius: 50%;
}
.modifier-card-selection .custom-checkbox-icon svg {
  visibility: hidden;
}
.modifier-card.selected .custom-checkbox-icon {
  border-color: var(--color-red-500);
  background-color: var(--color-red-500);
}
.modifier-card.selected .custom-checkbox-icon svg {
  visibility: visible;
  transform: scale(1);
}
.modifier-card.selected .custom-checkbox-icon.radio {
  background-color: transparent;
}
.modifier-card.selected .custom-checkbox-icon.radio:before {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-red-500);
}
.modifier-card-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
}
.modifier-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 130px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: -1;
  scale: 1.15;
  mix-blend-mode: multiply;
}
.modifier-card-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: -1;
  transition: opacity 0.3s ease-in-out;
}
.modifier-card-info {
  flex: 1;
  width: 100%;
  margin-top: 8px;
  display: flex;
}
.modifier-card-info-content {
  width: 100%;
  margin-top: auto;
}
.modifier-card-calories-price {
  display: flex;
  justify-content: space-between;
  min-height: 16px;
  gap: 4px;
}
.modifier-card-name {
  font-size: 15px;
  line-height: 15px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.modifier-card-badge-container {
  position: absolute;
  top: 4px;
  left: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 200px;
  z-index: 1;
}
.modifier-card-calories {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  white-space: nowrap;
}
.modifier-card-price {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
}
.modifier-card-quantity {
  margin-top: 4px;
  width: 100%;
  z-index: 9;
}
.modifier-card-quantity .quantity-selector {
  height: 38px;
}
.modifier-card-quantity .quantity-selector .quantity-btn {
  width: 28px;
  height: 28px;
  padding: 4px;
}
.modifier-card-quantity .quantity-selector .quantity-btn svg {
  width: 20px;
  height: 20px;
}
.modifier-card-calories-price.v2 {
  display: none;
}
@media (max-width: 768px) {
  .modifier-card {
    padding: 8px;
    width: auto;
  }
  .modifier-card.selected .modifier-card-quantity {
    margin-bottom: -6px;
  }
  .modifier-card-selection {
    top: 6px;
    right: 6px;
  }
  .modifier-card-info {
    margin-bottom: 4px;
  }
  .modifier-card-quantity .quantity-selector {
    border: unset;
    border-radius: unset;
    border-top: 1px solid var(--color-yellow-500);
    padding: 0;
    height: 36px;
  }
  .modifier-card-quantity .quantity-selector .quantity-value {
    min-width: unset;
  }
  .modifier-card-quantity .quantity-selector {
    justify-content: space-between;
  }
  .modifier-card-name {
    font-size: 14px;
    line-height: 14px;
  }
  .modifier-card-image {
    scale: 1.3;
  }
}
.upsell-products-section {
  margin: 24px 0;
  padding: 20px;
  background: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--color-neutrals-200);
}
.upsell-products-section-header {
  margin-bottom: 20px;
  text-align: center;
}
.upsell-products-section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-neutrals-800);
  margin: 0 0 8px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.upsell-products-section-subtitle {
  font-size: 16px;
  color: var(--color-neutrals-600);
  margin: 0;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.upsell-products-section-content {
  margin-bottom: 16px;
}
.upsell-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  justify-items: center;
}
.upsell-products-section-footer {
  padding-top: 16px;
  border-top: 1px solid var(--color-neutrals-200);
  text-align: center;
}
.upsell-products-selected-count {
  font-size: 14px;
  color: var(--color-neutrals-600);
  margin: 0;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
@media (max-width: 768px) {
  .upsell-products-section {
    margin: 16px 0;
    padding: 16px;
  }
  .upsell-products-section-title {
    font-size: 20px;
  }
  .upsell-products-section-subtitle {
    font-size: 14px;
  }
  .upsell-products-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .upsell-products-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.modifier-section-header {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  gap: 16px;
  padding: 0 24px;
  flex-wrap: wrap;
}
.modifier-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.modifier-section-swiper {
  margin-left: -24px;
  margin-right: -24px;
  -webkit-user-select: none;
  user-select: none;
}
.modifier-section-swiper .swiper-pagination-progressbar {
  width: calc(100% - 48px);
}
.modifier-cards-swiper-container {
  width: 100%;
  position: relative;
}
.modifier-cards-swiper {
  width: 100%;
  padding-bottom: 16px;
  --swiper-scrollbar-sides-offset: 24px;
}
@media (max-width: 768px) {
  .modifier-cards-swiper .swiper-scrollbar {
    display: none !important;
  }
}
.modifier-card-slide {
  width: fit-content;
}
.modifier-card-slide:first-of-type {
  margin-left: 24px;
}
.modifier-card-slide:last-of-type {
  margin-right: 24px;
}
.modifier-card-item {
  flex-shrink: 0;
  width: fit-content;
}
.modifier-section-title-wrapper {
  flex: 1;
}
.modifier-section-content {
  width: 100%;
  padding: 0 24px;
  margin-top: 16px;
}
.modifier-section-title {
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
}
.required-asterisk {
  color: var(--color-red-500);
}
.modifier-section-subtitle {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-500);
}
.clear-selection-wrapper {
  text-align: end;
  align-self: center;
}
.clear-selection-wrapper .modifier-section-checkbox {
  align-items: center;
  text-align: left;
  line-height: 16px;
}
.clear-selection-wrapper .modifier-section-checkbox .custom-checkbox-icon {
  margin-top: 0;
  margin-bottom: 5px;
}
.modifier-section-checkbox .modifier-section-subtitle {
  line-height: 16px;
}
.modifier-section-checkbox-label {
  display: flex;
  flex-direction: column;
}
.modifier-section-tabs {
  border: 1px solid var(--color-neutrals-200);
  background-color: var(--color-white);
  padding: 4px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 375px;
  height: fit-content;
}
.modifier-section-tabs .tab-button {
  color: var(--color-neutrals-600);
  gap: 8px;
  min-width: unset;
}
.modifier-section-tabs .tab-button p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 16px;
  line-height: normal;
  color: var(--color-neutrals-500);
}
.modifier-section-tabs .tab-button.active {
  background-color: var(--color-yellow-500);
  color: var(--color-neutrals-800);
}
.modifier-upgrade-section {
  background-color: var(--color-white);
  padding: 18px 16px;
  border-radius: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--color-blue-500);
}
.modifier-extra-side {
  margin-top: 16px;
}
.extra-side-title {
  margin-bottom: 16px;
}
.modifier-upgrade-section.checked {
  border-color: var(--color-yellow-500);
  box-shadow: 0 0 20px 4px #d8d8d852;
}
.modifier-upgrade-section .filters-options-text {
  font-family: var(--font-sink);
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-800);
  margin-top: 2px;
}
.modifier-upgrade-section .filters-options-text span {
  font-family: var(--font-sink);
  color: var(--color-green-500);
}
.modifier-upgrade-section .custom-checkbox {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.modifier-upgrade-section .custom-checkbox-icon {
  margin: 0;
}
@media (max-width: 768px) {
  .modifier-section-header {
    padding: 0 16px;
    margin-top: 4px;
  }
  .modifier-section-content {
    padding: 0 16px;
  }
  .nested-modifier-section-container .modifier-section-header {
    padding: 0 24px;
  }
  .modifier-section-tabs {
    min-width: 100%;
    margin-bottom: 12px;
  }
  .modifier-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    margin-top: 12px;
  }
  .modifier-section-expand-collapse {
    margin: 16px;
    background-color: transparent;
  }
  .modifier-section-expand-collapse .expand-collapse-header:hover {
    background-color: transparent;
  }
}
.nested-modifiers-container {
  margin-top: 16px;
  margin-left: 24px;
  border-left: 2px solid var(--color-neutrals-200);
  padding-left: 16px;
}
.nested-modifier-section {
  margin-bottom: 24px;
}
.nested-modifier-section-header {
  margin-bottom: 16px;
}
.nested-modifier-section-title {
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-neutrals-700);
  margin: 0 0 4px;
}
.nested-modifier-section-subtitle {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  margin: 0;
}
.nested-modifier-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}
@media (max-width: 768px) {
  .nested-modifiers-container {
    margin-left: 16px;
    padding-left: 12px;
    display: block;
    width: 100%;
    margin-top: 16px;
  }
  .nested-modifier-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    display: grid;
    width: 100%;
    gap: 8px;
    margin-top: 12px;
  }
  .nested-modifier-section {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--color-neutrals-100);
  }
  .nested-modifier-section-header {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    padding: 0 16px;
  }
  .nested-modifier-section-title {
    font-family: var(--font-myriad-pro-black-condensed);
    font-size: 18px;
    line-height: 24px;
    color: var(--color-neutrals-800);
    margin: 0 0 4px;
  }
  .nested-modifier-section-subtitle {
    font-family: var(--font-myriad-pro-semibold-condensed);
    font-size: 12px;
    line-height: 16px;
    color: var(--color-neutrals-500);
    margin: 0;
  }
  .modifier-extra-side {
    position: sticky;
    bottom: 12px;
    z-index: 9;
  }
}
.modifier-section--invalid,
.modifier-section-expand-collapse--invalid {
  border: 2px solid var(--color-red-500);
  border-radius: 8px;
  background-color: #ef44440d;
  padding: 8px;
}
.modifier-section--invalid .modifier-section-title,
.modifier-section-expand-collapse--invalid .modifier-section-title {
  color: var(--color-red-600);
}
.expand-collapse {
  overflow: hidden;
  background-color: var(--color-white);
}
.expand-collapse-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  min-height: 40px;
  transition: background-color 0.2s ease;
}
.expand-collapse-header:hover {
  background-color: var(--color-white);
}
.expand-collapse-title {
  flex: 1;
  margin-right: 12px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
}
.expand-collapse-icon {
  transition: transform 0.3s ease;
  color: var(--color-neutrals-800);
  flex-shrink: 0;
}
.expand-collapse-icon.expanded {
  transform: rotate(180deg);
}
.expand-collapse-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.expand-collapse-inner {
  margin-top: 8px;
}
.expand-collapse-content.scrollable {
  overflow-y: auto;
  max-height: 200px;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
@keyframes expand {
  0% {
    max-height: 0;
  }
  to {
    max-height: var(--content-height);
  }
}
@keyframes collapse {
  0% {
    max-height: var(--content-height);
  }
  to {
    max-height: 0;
  }
}
.finish-meal-section {
  border: 1px solid var(--color-blue-500);
  background-color: var(--color-blue-50);
  border-radius: 16px;
  padding: 24px;
  margin: 24px;
}
.finish-meal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}
.finish-meal-title-wrapper {
  flex: 1;
  margin-bottom: 16px;
}
.finish-meal-title {
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 24px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.finish-meal-subtitle {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-500);
}
.finish-meal-items {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.dashed-line-top {
  margin-top: 4px;
}
.finish-meal-item {
  border-bottom: 1px dashed var(--color-neutrals-100);
}
.finish-meal-item:last-child {
  border-bottom: none;
}
.finish-meal-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  gap: 16px;
}
.finish-meal-item-info {
  flex: 1;
}
.finish-meal-item-title {
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
}
.finish-meal-item-description {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-500);
}
.finish-meal-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.finish-meal-item-action-btn {
  width: 48px;
  height: 48px;
  border: none;
  background: var(--color-yellow-400);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-neutrals-800);
  transition: all 0.2s ease;
}
.finish-meal-item-action-btn:hover {
  background: var(--color-yellow-500);
}
.finish-meal-modifiers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}
.finish-meal-section .modifier-cards-scroll-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.finish-meal-section .modifier-card-item {
  flex-shrink: 0;
  width: auto;
}
@media (max-width: 768px) {
  .finish-meal-section {
    margin-left: 0;
    margin-right: 0;
    border-radius: unset;
    padding: 24px 16px;
  }
  .finish-meal-title-wrapper {
    margin-bottom: 0;
  }
  .finish-meal-title {
    font-size: 20px;
    line-height: 28px;
  }
  .finish-meal-modifiers-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    margin-top: 12px;
  }
  .mobile-finish-meal-section {
    background-color: var(--color-blue-50);
    padding: 16px;
    margin-top: 16px;
  }
  .finish-meal-section-expand-collapse {
    background-color: var(--color-blue-50);
    margin-bottom: 0;
  }
  .finish-meal-section-expand-collapse .expand-collapse-header:hover {
    background-color: var(--color-blue-50);
  }
}
.modal.customize-order-details-modal {
  max-width: 1256px;
}
.customize-order-details-modal .modal-content {
  background: none;
  display: flex;
}
.customize-order-details-modal-wrapper {
  width: 100%;
  display: flex;
  gap: 8px;
}
.customize-modal-header {
  padding: 26px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-yellow-50);
}
.customize-order-details-modal-left-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 2;
  border-radius: 16px;
  overflow-x: hidden;
}
.customize-order-modal-title {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
}
.customize-order-again-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background-color: transparent;
  color: var(--color-red-500);
  text-decoration: underline;
  border: none;
  font-family: var(--font-myriad-pro-black-condensed);
}
.customize-order-again-btn:hover {
  color: var(--color-red-600);
  background-color: transparent;
}
.customize-modal-main-content {
  flex: 1;
  overflow-y: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
  background-color: var(--color-white);
}
.order-owner-info-section {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--color-neutrals-100);
}
.order-owner-name {
  font-size: 24px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.owner-edit-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-neutrals-800);
  border: none;
}
.owner-edit-btn:hover {
  color: var(--color-red-500);
  background: transparent;
}
.modal-product-info-wrapper {
  padding: 24px;
  background-color: var(--color-white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 12px;
}
.order-details-modal-product-image {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  scale: 1.1;
}
@media (min-width: 769px) {
  .order-details-modal-product-image {
    padding-right: 10px;
  }
}
.order-details-modal-product-image img {
  width: 100%;
  height: 100%;
  max-width: 370px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.order-details-modal-product-info h2 {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-neutrals-800);
  z-index: 99;
}
.order-details-modal-product-description-text {
  font-size: 16px;
  line-height: 18px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
  z-index: 99;
}
.order-details-modal-product-description {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 60%;
}
.order-details-modal-labels {
  display: flex;
  align-items: center;
  gap: 8px;
}
.information-section-wrapper {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.information-section-wrapper .information-text {
  display: flex;
  gap: 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.information-text svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.customize-modal-footer {
  padding: 16px 24px 24px;
  background-color: var(--color-white);
  border-top: 1px solid var(--color-neutrals-100);
  box-shadow: 0 0 20px 4px #d8d8d852;
}
.added-product-items-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
}
.added-product-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.added-product-item-title {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-800);
}
.added-product-item-price-and-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
}
.added-product-item-price {
  font-size: 16px;
  line-height: 20px;
  color: var(--color-neutrals-800);
}
.customize-modal-footer .added-product-item .quantity-selector {
  width: 112px;
  height: 40px;
}
.customize-modal-footer .product-price-and-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.customize-modal-footer .quantity-selector {
  width: 144px;
}
.customize-modal-footer .quantity-selector .quantity-value {
  min-width: unset;
  flex: 1;
}
.customize-modal-footer .product-details-btn-wrapper .add-to-bag-btn {
  width: auto;
}
.customize-order-details-modal-right-content {
  flex: 1;
  min-width: 400px;
  max-width: 448px;
  background-color: var(--color-white);
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  height: max-content;
}
.order-details-left-section-header {
  display: flex;
  align-items: center;
  padding: 26px 24px;
  justify-content: space-between;
  background: var(--color-yellow-50);
}
.order-details-left-section-header h2 {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
}
.Favorite-Recent-carousel {
  margin: 24px 0;
}
#favRecentPrevRef,
#favRecentNextRef {
  background: var(--color-white);
  color: var(--color-neutrals-800);
  border: 1px solid var(--color-neutrals-800);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#favRecentPrevRef:hover,
#favRecentNextRef:hover {
  background: var(--color-neutrals-800);
  color: var(--color-white);
}
.fav-recent-item-card {
  padding: 24px;
  border: 1px solid var(--color-neutrals-100);
  background-color: var(--color-white);
  border-radius: 16px;
}
.fav-recent-item-image {
  width: 100%;
  height: 100%;
}
.fav-recent-item-image img {
  width: 100%;
  height: 100%;
  max-width: 352px;
  max-height: 220px;
  object-fit: contain;
}
.fav-recent-item-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 296px;
}
.fav-recent-item-title {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-800);
}
.fav-recent-item-title span {
  font-family: var(--font-sink);
}
.fav-recent-item-modifiers {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.fav-recent-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fav-recent-item-info-bottom {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fav-recent-item-info-bottom p {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.small-vertical-separator-line {
  width: 1px;
  height: 12px;
  background: var(--color-neutrals-100);
}
.fav-recent-item-btn-wrapper {
  margin-top: 24px;
}
.fav-recent-item-btn-wrapper button {
  width: 100%;
}
.modifiers-section-wrapper {
  background-color: var(--color-yellow-50);
  border-top: 1px solid var(--color-neutrals-100);
  padding-bottom: 24px;
}
.modifiers-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  color: #666;
  font-style: italic;
}
.modifiers-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-neutrals-200);
  border-top: 2px solid var(--color-primary-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}
.products-you-may-like-wrapper {
  padding: 0 16px;
}
.products-you-may-like-wrapper .products-you-may-like {
  background-color: var(--color-white);
}
.products-you-may-like-wrapper .products-you-may-like .swiper-pagination {
  display: none;
}
.products-you-may-like-wrapper .products-you-may-like .products-section-header {
  margin-bottom: 0;
}
.products-you-may-like-wrapper .products-you-may-like .products-swiper {
  padding-top: 8px;
  border-top: unset;
}
.product-price-wrapper .selected-modifiers-string {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 18px;
  line-height: 20px;
  color: var(--color-neutrals-600);
}
.product-price-wrapper .required-modifiers-string {
  color: var(--color-red-500);
}
.product-price-wrapper.flex-center {
  display: flex;
  align-items: center;
  gap: 16px;
}
.customize-order-details-modal .products-swiper .swiper-bullet-active {
  width: 8px;
}
@media (max-width: 768px) {
  .customize-order-details-modal-wrapper {
    height: 100%;
  }
  .customize-order-details-modal-wrapper .modifier-card-slide .modifier-card {
    max-height: 150px;
    max-width: 110px;
    min-width: 110px;
  }
  .customize-order-details-modal-wrapper
    .modifier-card-slide
    .modifier-card-image {
    max-width: 85px;
  }
  .customize-order-details-modal .modal-content {
    display: block;
  }
  .customize-order-details-modal-left-content {
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
  }
  .customize-modal-footer {
    padding: 16px;
  }
  .customize-modal-footer .product-details-btn-wrapper .add-to-bag-btn {
    width: 100%;
  }
  .order-owner-info-section {
    padding: 16px;
  }
  .order-owner-name {
    font-size: 20px;
    line-height: 28px;
  }
  .owner-edit-btn svg {
    width: 20px;
    height: 20px;
  }
  .product-price-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    margin-top: 16px;
  }
  .product-price-wrapper h4 {
    font-size: 24px;
    line-height: 24px;
  }
  .customize-modal-footer .dashed-line {
    margin: 8px 0;
  }
  .modal-product-info-expand-collapse {
    width: 100%;
    padding: 12px 16px;
  }
  .modal-product-info-expand-collapse .expand-collapse-title {
    font-family: var(--font-sink);
    font-size: 24px;
    line-height: 24px;
    color: var(--color-neutrals-800);
  }
  .modal-product-info-expand-collapse .modal-product-info-wrapper {
    padding: 0;
    flex-direction: column;
    gap: 16px;
    display: flex;
  }
  .order-details-modal-product-image img {
    width: 256px;
  }
  .information-section-wrapper {
    padding: 16px;
    border-top: 1px solid var(--color-neutrals-100);
  }
  .added-product-item-title {
    font-size: 16px;
    line-height: 24px;
  }
  .modal-product-info-wrapper .order-details-modal-product-description {
    max-width: unset;
  }
  .customize-modal-main-content {
    overflow-x: hidden;
  }
}
.fav-recent-item-modifiers-label {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-600);
  margin: 0 0 6px;
  font-weight: 500;
}
.fav-recent-modifiers-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-black-condensed);
}
.fav-recent-modifier-item {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  margin-bottom: 2px;
  padding-left: 8px;
  position: relative;
}
.fav-recent-modifier-item:before {
  content: '•';
  color: var(--color-red-500);
  position: absolute;
  left: 0;
  font-size: 10px;
}
.no-modifiers {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-400);
  margin: 0;
  font-style: italic;
}
.favorite-product-section {
  padding: 20px 0;
}
.favorite-product-header {
  margin-bottom: 16px;
}
.favorite-product-header h3 {
  font-size: 18px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  margin: 0 0 4px;
  font-family: var(--font-myriad-pro-black-condensed);
}
.favorite-product-header p {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-600);
  margin: 0;
}
.favorite-product-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.favorite-product-info h4 {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  margin: 0 0 8px;
  font-family: var(--font-myriad-pro-black-condensed);
}
.favorite-product-description {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-600);
  margin: 0 0 12px;
}
.favorite-product-modifiers {
  margin-top: 12px;
}
.favorite-modifiers-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-700);
  margin: 0 0 8px;
  font-weight: 500;
}
.favorite-modifiers-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.favorite-modifier-item {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-600);
  margin-bottom: 4px;
  padding-left: 12px;
  position: relative;
}
.favorite-modifier-item:before {
  content: '•';
  color: var(--color-red-500);
  position: absolute;
  left: 0;
}
.use-favorite-btn {
  align-self: flex-start;
  background-color: var(--color-red-500);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.use-favorite-btn:hover {
  background-color: var(--color-red-600);
}
.use-favorite-btn:active {
  background-color: var(--color-red-700);
}
@media (max-width: 768px) {
  .favorite-product-section {
    padding: 16px 0;
  }
  .favorite-product-header h3 {
    font-size: 16px;
    line-height: 22px;
  }
  .favorite-product-info h4 {
    font-size: 14px;
    line-height: 20px;
  }
  .use-favorite-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 24px;
  }
}
.customize-order-details-modal-wrapper .product-recommendation-card {
  background-color: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--color-neutrals-100);
  padding: 16px;
  max-width: unset;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.product-recommendation-card-image {
  width: 100px;
  height: 100px;
  margin: 0 auto 12px;
  border-radius: 8px;
  overflow: hidden;
}
.product-recommendation-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-recommendation-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-recommendation-card-title {
  font-size: 16px;
  line-height: 16px;
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-neutrals-800);
  margin: 0 0 6px;
  max-width: calc(100% - 28px);
}
.product-recommendation-card-description {
  font-size: 12px;
  line-height: 14px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
  margin: 0 0 4px;
}
.product-recommendation-card-modifiers {
  font-size: 14px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-black-condensed);
  margin: 0;
}
.product-recommendation-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
}
.product-recommendation-card-actions .add-to-order-btn {
  padding: 0;
  width: 38px;
  height: 38px;
  min-width: unset;
  transition: all 0.3s ease;
}
#mobileFavPrevRef,
#mobileFavNextRef {
  background: var(--color-white);
  color: var(--color-neutrals-800);
  border: 1px solid var(--color-neutrals-800);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mobileFavPrevRef:hover,
#mobileFavNextRef:hover {
  background: var(--color-neutrals-800);
  color: var(--color-white);
}
.v3 .modifiers-section-wrapper {
  background-color: var(--color-white);
}
.v3 .modifier-card {
  box-shadow: unset;
  text-align: center;
}
.v3 .modifier-card:not(.selected) {
  border: 1px solid var(--color-neutrals-100);
}
.v3.fit-content {
  width: fit-content;
  height: fit-content;
}
.v3 .modifier-card img {
  transition: transform 0.2s ease-in-out;
}
.v3 .modifier-card:not(.modifier-disabled):hover img {
  transform: scale(1.1);
}
.v3 .modifier-card-calories-price {
  justify-content: center;
}
.v3 .modifier-card-selection {
  display: none;
}
.v3 .modifier-card-badge-container {
  left: 50%;
  transform: translate(-50%);
}
.v3 .modifier-card-calories-price.v2,
.v3 .modifier-card-calories-price .modifier-card-price {
  display: block;
}
.v3 .modal-product-info-wrapper {
  gap: 30px;
}
.v3 .finish-meal-section .modifier-cards-scroll-container {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.v3 .finish-meal-item-content .modifier-card {
  width: 100%;
}
@media (max-width: 768px) {
  .v3.fit-content {
    width: 100%;
  }
  .modal.customize-order-details-modal.v3 .modal-product-info-wrapper {
    display: flex;
    flex-direction: column;
    padding: 16px;
  }
  .modal-product-info-wrapper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
    width: 100%;
    z-index: 99;
  }
  .modal-product-info-wrapper-header h2 {
    font-size: 24px;
    line-height: 24px;
    color: var(--color-neutrals-800);
    z-index: 99;
  }
  .modal-product-info-wrapper-header-close-btn {
    padding: 0;
    background: transparent;
    color: var(--color-neutrals-800);
    border: none;
  }
  .modal-product-info-wrapper-header-close-btn:hover {
    color: var(--color-red-500);
    background: transparent;
  }
  .v3 .modifier-extra-side {
    position: static;
  }
}
.v3 .order-details-modal-product-info h2 {
  font-size: 32px;
  line-height: 32px;
  z-index: 9999;
}
.stepper-v2-container {
  padding: 16px 24px;
}
.stepper-v2-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}
.step-v2-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  min-height: 50px;
  gap: 16px;
}
.step-v2-circle-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.step-v2-circle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-v2-line {
  width: 2px;
  flex: 1;
  background-color: var(--color-neutrals-500);
}
.step-v2-line.completed {
  background-color: var(--color-red-500);
}
.step-v2-line.transparent {
  background-color: transparent;
}
.stepper-v2-content {
  display: flex;
  gap: 16px;
}
.stepper-v2-label,
.stepper-v2-value {
  flex: 1;
}
.stepper-v2-label {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-800);
  font-size: 14px;
  line-height: 16px;
}
.stepper-v2-value {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
  font-size: 16px;
  line-height: 16px;
}
.stepper-v2-value.required {
  color: var(--color-red-500);
}
.stepper-v2-edit-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-neutrals-800);
}
.stepper-v2-edit-btn:hover {
  background: transparent;
  color: var(--color-red-500);
}
.stepper-v2-image {
  display: flex;
  gap: 8px;
  flex: 1;
  margin-top: -12px;
  max-width: 200px;
  flex-wrap: wrap;
}
.stepper-v2-image img {
  width: 60px;
  height: 60px;
  object-fit: cover;
}
.step-v2-wrapper:has(.stepper-v2-image) {
  min-height: 64px;
}
.step-v2-wrapper:has(.stepper-v2-image) .stepper-v2-value,
.no-customizations .stepper-v2-label {
  font-family: var(--font-myriad-pro-black-condensed);
}
.no-customizations .stepper-v2-label {
  color: var(--color-neutrals-500);
  font-size: 16px;
  line-height: 16px;
}
.stepper-v2-value .required-modifiers-string {
  color: var(--color-red-500);
}
.v4.customize-order-details-modal,
.v4 .modal-content {
  width: 100%;
  height: 100%;
}
.v4.fit-content {
  width: fit-content;
  height: fit-content;
}
.v4 .modal-product-info-wrapper {
  padding: 24px 8px;
}
.v4 .modal-update-prev-button {
  margin-left: 456px;
}
.v4 .customize-order-details-modal-left-content {
  max-width: 448px;
  flex: auto;
}
.v4:not(:has(.modal-product-info-large)) .modifier-section-header {
  padding-top: 16px;
  margin-top: 0;
  position: sticky;
  top: 0;
  background: var(--color-white);
  z-index: 9;
  border-bottom: 1px solid var(--color-neutrals-100);
  padding-bottom: 8px;
}
.v4:not(:has(.modal-product-info-large)) .modifiers-section-wrapper {
  border-top: unset;
}
.v4 .customize-order-details-modal-right-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
  overflow-x: hidden;
  max-width: 950px;
}
.v4 .stepper-container {
  width: 100%;
  max-width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  align-items: flex-start;
  padding: 16px 0;
  grid-template-rows: 1fr;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(100px, 1fr);
}
.v4 .stepper-container .step-label {
  white-space: normal;
  line-height: 12px;
  margin-top: 4px;
}
.v4 .order-details-modal-product-image {
  width: 100%;
  height: 100%;
  justify-content: center;
}
.v4 .modifiers-section-wrapper {
  background-color: var(--color-white);
}
.v4 .modifier-card {
  box-shadow: unset;
  text-align: center;
}
.v4 .modifier-card:not(.selected) {
  border: 1px solid var(--color-neutrals-100);
}
.v4 .modifier-card img {
  transition: transform 0.2s ease-in-out;
}
.v4 .modifier-card:not(.modifier-disabled):hover img {
  transform: scale(1.2);
}
.v4 .modifier-card-calories-price {
  justify-content: center;
}
.v4 .modifier-card-badge-container {
  left: 50%;
  transform: translate(-50%);
}
.v4 .custom-checkbox-icon.radio {
  visibility: hidden;
}
.order-details-left-section-header.showModifier {
  background-color: var(--color-white);
}
.v4 .product-details-btn-wrapper {
  margin-left: auto;
}
.v4 .order-owner-info-section {
  padding: 0;
  border: unset;
}
.v4 .customize-order-details-modal-right-content .modifier-card {
  width: 100%;
  height: 165px;
}
.v4 .customize-modal-footer {
  padding: 16px;
}
.v4 .customize-modal-footer .product-price-wrapper {
  margin-top: 0;
}
.v4 .customize-modal-footer .product-price-wrapper h4 {
  font-size: 28px;
  line-height: 32px;
}
.v4 .order-details-modal-product-info h2 {
  font-size: 32px;
  line-height: 32px;
}
.v4 .selected-modifiers-string {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
  margin-bottom: 8px;
}
.v4 .selected-modifiers-string strong {
  font-family: var(--font-myriad-pro-black-condensed);
}
.v4 .order-details-modal-product-description {
  max-width: unset;
}
.products-swiper .swiper-bullet {
  background-color: #3c3c3c3d;
}
.products-swiper .swiper-bullet-active {
  background-color: var(--color-neutrals-600);
}
.v4 .products-swiper {
  padding-bottom: 40px;
  border-top: unset;
}
.v4 .favorite-recent-orders-expand-collapse .expand-collapse-header {
  padding: 16px 16px 8px;
  display: none;
}
.favorite-recent-orders-expand-collapse
  .expand-collapse-header-end-text-content,
.favorite-recent-orders-expand-collapse .expand-collapse-header svg {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-red-500);
  font-family: var(--font-myriad-pro-black-condensed);
}
.favorite-recent-orders-expand-collapse .expand-collapse-title {
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-neutrals-800);
  font-size: 24px;
  line-height: 28px;
}
.v4 .modal-product-info-large {
  width: 100%;
}
.v4 .modal-product-info-large .modal-product-info-wrapper {
  display: flex;
  flex-direction: column;
  padding: 16px 24px 0;
}
.v4 .modal-product-info-large .order-details-modal-product-info {
  align-self: flex-start;
  z-index: 99;
}
.v4 .product-recommendation-card {
  min-width: 250px;
}
.v4 .modal-product-info-expand-collapse.expanded {
  padding-bottom: 0;
}
.v4 .order-summary-section {
  padding: 16px;
}
.v4 .order-summary-section .stepper-v4-container {
  padding-left: 8px;
  padding-right: 8px;
}
.v4 .order-summary-section-title {
  font-size: 24px;
  line-height: 28px;
}
.v4 .customize-modal-main-content.bg-yellow {
  background-color: var(--color-yellow-50);
}
.favorite-recent-orders-wrapper .products-section-title {
  padding: 0 16px;
}
.favorite-recent-orders-wrapper .products-section-title h2 {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--font-myriad-pro-black-condensed);
}
.v4 .customize-modal-footer .quantity-selector {
  width: 126px;
}
.v4 .modifier-card-selection {
  display: none;
}
.v4 .order-summary-section .stepper-v2-container {
  padding: 0;
}
.v4 .order-summary-section .step-v2-wrapper {
  display: flex;
  border-bottom: 2px solid var(--color-neutrals-100);
}
.v4 .order-summary-section .stepper-v2-image {
  flex: none;
  margin-top: 0;
}
.v4 .order-summary-section .stepper-v2-content {
  width: 100%;
  align-items: center;
}
.v4 .quantity-selector {
  background-color: var(--color-white);
}
.v4 .modal-footer-action-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}
.v4 .modal-footer-action-buttons .add-to-bag-btn {
  margin-top: 4px;
  margin-bottom: 4px;
  gap: 4px;
}
@media (max-width: 768px) {
  .v4.fit-content {
    width: 100%;
  }
  .v4 .products-swiper {
    padding-top: 8px;
  }
  .v4 .modal-update-prev-button {
    margin-left: 16px;
    margin-right: auto;
  }
  .v4 .favorite-recent-orders-wrapper {
    margin-top: 8px;
  }
  .v4 .customize-modal-header {
    background-color: var(--color-white);
    padding: 0;
    flex-direction: column;
  }
  .v4 .order-owner-info-section {
    padding: 16px 16px 0;
    margin-right: auto;
  }
  .v4 .modal-product-info-wrapper {
    padding: 0;
  }
  .v4 .order-summary-wrapper .modal-product-info-wrapper {
    padding: 8px 16px;
  }
  .v4 .order-summary-wrapper .order-details-modal-product-image img {
    width: 180px;
  }
  .v4 .modal-product-info-large .order-details-modal-product-image img {
    width: 100%;
  }
  .v4 .customize-order-details-modal-left-content {
    max-width: unset;
  }
  .v4 .modal-product-info-large .modal-product-info-wrapper {
    padding: 16px 16px 0;
  }
  .v4 .favorite-recent-orders-expand-collapse .expand-collapse-header {
    display: flex;
  }
  .v4 .nested-modifier-section-container .modifier-section-header {
    padding: 0;
  }
  .v4 .order-summary-wrapper .modifier-section-title-wrapper {
    padding: 16px 16px 12px;
    border-bottom: 2px solid var(--color-neutrals-100);
  }
  .v4
    .order-summary-wrapper
    .modifier-section-title-wrapper
    .modifier-section-title {
    font-family: var(--font-sink);
    font-size: 24px;
    line-height: 24px;
  }
  .v4 .modifier-section-header .modifier-section-tabs {
    margin-bottom: 0;
  }
  .v4 .customize-modal-header:has(.modal-product-info-large) {
    padding-bottom: 16px;
  }
  .v4:has(.modal-product-info-large) .modifier-cards-grid {
    margin-top: 0;
  }
  .v4 .modifier-section {
    padding-bottom: 16px;
  }
}
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  to {
    background-position: calc(200px + 100%) 0;
  }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-neutrals-100) 0px,
    var(--color-white) 40px,
    var(--color-neutrals-100) 80px
  );
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}
.skeleton--circle {
  border-radius: 50%;
}
.skeleton--rounded {
  border-radius: 8px;
}
.skeleton--pill {
  border-radius: 9999px;
}
.skeleton--small {
  height: 16px;
}
.skeleton--medium {
  height: 24px;
}
.skeleton--large {
  height: 32px;
}
.skeleton--full {
  width: 100%;
}
.skeleton--half {
  width: 50%;
}
.skeleton--third {
  width: 33.333%;
}
.skeleton--quarter {
  width: 25%;
}
.fresh-design-menu-card {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--color-neutrals-200);
  transition: background-color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.fresh-design-menu-card:hover {
  background-color: transparent;
  border-color: var(--color-neutrals-200);
}
.fresh-design-menu-card:hover .menu-card-hover-overlay {
  transform: translate(0);
}
.fresh-design-menu-card.menu-card--loading:hover .menu-card-hover-overlay {
  transform: translateY(calc(-100% + 16px));
}
.menu-card-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.menu-card-image-container img {
  width: 100%;
  height: 100%;
  max-width: 248px;
  transition: all 0.1s ease;
  scale: 1.2;
}
.fresh-design-menu-card:hover .menu-card-image-container img {
  scale: 1.2;
}
.menu-card-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.menu-card-title-container {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}
.menu-card-title-container .menu-card-title {
  font-size: 24px;
  line-height: 24px;
  font-family: var(--font-sink);
  color: var(--color-neutrals-800);
}
.menu-card-title-container p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.mobile-menu-card-left-content {
  flex-shrink: 0;
}
.mobile-menu-card-left-content img {
  width: 100%;
  height: 100%;
  min-width: 100px;
  max-width: 100px;
  scale: 1.3;
}
.mobile-fresh-design-menu-card {
  cursor: pointer;
  padding: 0 16px;
  background-color: var(--color-white);
  width: 100%;
  color: unset;
  text-align: unset;
  border-radius: unset;
}
.mobile-menu-card-chevron {
  flex-shrink: 0;
  margin-left: auto;
}
.mobile-fresh-design-menu-card:hover,
.mobile-fresh-design-menu-card:focus {
  background-color: transparent;
  border-color: transparent;
}
.mobile-menu-card-content {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 100px;
}
.menu-card-wrapper li:not(:last-child) .mobile-menu-card-content {
  border-bottom: 1px solid var(--color-neutrals-100);
}
.mobile-menu-card-right-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.mobile-menu-card-right-content .menu-badge {
  margin-bottom: 0;
}
.mobile-badge-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.menu-card-button,
.mobile-menu-card-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .menu-card-title-container {
    min-height: auto;
    align-items: unset;
  }
  .menu-card-title-container .menu-card-title {
    font-size: 20px;
    line-height: 20px;
  }
  .menu-card-title-container p {
    font-size: 14px;
    line-height: 16px;
  }
  .menu-card-wrapper li:first-child .mobile-fresh-design-menu-card,
  .menu-card-wrapper li:first-child .fresh-design-menu-card {
    background-color: var(--color-yellow-100);
  }
}
.menu-card-title-container .menu-card-title.skeleton {
  color: transparent;
  font-size: 24px;
  line-height: 24px;
}
.menu-card-title-container p.skeleton {
  color: transparent;
  font-size: 16px;
  line-height: 24px;
}
.fresh-design-menu-card .skeleton,
.mobile-fresh-design-menu-card .skeleton {
  pointer-events: none;
}
.fresh-design-menu-card.menu-card--loading {
  cursor: default;
}
@media (max-width: 768px) {
  .menu-card-title-container .menu-card-title.skeleton {
    font-size: 20px;
    line-height: 20px;
  }
  .menu-card-title-container p.skeleton {
    font-size: 14px;
    line-height: 16px;
  }
}
.menu-product-card-container {
  padding: 24px;
  background-color: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--color-neutrals-100);
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.menu-product-card-container:focus {
  outline: 2px solid var(--color-red-500);
}
.product-price-btn-wrapper-hide-prices {
  justify-content: flex-end !important;
}
.menu-product-card-container.product-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-neutrals-50);
}
.menu-product-card-container.product-disabled:hover {
  transform: none;
  box-shadow: none;
}
.menu-product-card-container .badge-container {
  position: absolute;
  top: 24px;
  left: 24px;
}
.menu-product-image {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-product-image img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  scale: 1.1;
}
.menu-product-name-wrapper {
  margin-bottom: 12px;
}
.badge-container,
.mobile-badge-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.menu-product-name-wrapper .menu-badge {
  margin-bottom: 0;
}
.mobile-menu-card-left-content img {
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: contain;
}
.menu-product-heart-btn-wrapper {
  position: absolute;
  top: 24px;
  right: 24px;
}
.menu-product-card-main-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 24px;
}
.menu-product-card-main-content .product-price-btn-wrapper {
  margin-top: auto;
  flex-wrap: wrap;
}
.menu-product-name-text {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
  font-family: var(--font-sink);
}
.menu-product-description-text {
  font-size: 16px;
  line-height: 20px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
  line-clamp: 5;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  display: -webkit-box;
}
.menu-product-calories-text {
  font-size: 12px;
  line-height: 16px;
  margin-top: 8px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-customize-btn {
  min-width: 174px;
}
.mobile-list-view-img {
  max-width: 100px;
  width: 100%;
  scale: 1.4;
}
.mobile-list-view-img img {
  width: 100%;
  height: 100%;
}
.menu-product-card-container .sr-only {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: transparent;
}
.menu-product-card-container .sr-82 {
  width: 82%;
}
.menu-product-card-container:has(.sr-only:focus) {
  outline: 2px solid var(--color-red-500);
}
.mobile-menu-card-add-btn {
  flex-shrink: 0;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-red-500);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  min-width: auto;
  transition: background-color 0.2s ease;
}
@media (max-width: 768px) {
  .menu-product-card-container {
    padding: 16px;
  }
  .menu-product-card-container.card-list-view {
    padding: 4px 4px 4px 24px;
  }
  .menu-product-card-container
    .product-content-wrapper
    .product-description-text {
    line-clamp: none;
    -webkit-line-clamp: none;
    font-size: 16px;
    line-height: 18px;
  }
  .menu-product-card-container .product-card-right-content {
    gap: 8px;
  }
  .menu-product-card-container .mobile-add-to-bag-btn {
    bottom: 16px;
    right: 16px;
  }
  .menu-product-card-container .sr-only {
    z-index: 9;
  }
  .menu-product-card-container .mobile-add-to-bag-btn {
    z-index: 99;
  }
}
.product-navigation-wrapper .product-custom-bullets .swiper-bullet {
  background-color: var(--color-neutrals-300);
  opacity: 0.15;
  transform: scale(0.6);
  width: 6px;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    width 0.2s ease;
}
.product-navigation-wrapper .product-custom-bullets .swiper-bullet-active {
  opacity: 1;
  transform: scale(1.3);
  width: 20px;
  background-color: var(--color-neutrals-800);
  border-radius: 999px;
}
:root {
  --swiper-navigation-size: 44px;
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-lock {
  display: none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
.menu-slider-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f080;
  overflow: hidden;
}
.menu-slider-background {
  position: absolute;
  left: 15%;
  z-index: 0;
  pointer-events: none;
}
.menu-slider-background {
  animation: slideOutCharacter 1.5s ease-out 0.5s forwards;
}
.animated-character-logo {
  color: var(--color-neutrals-200);
  animation: floatAndRotate 1s linear 0.2s infinite;
}
.menu-slider {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  animation: slideInFromRight 1s ease-out 0.3s forwards;
}
.menu-swiper {
  width: 100%;
  padding: 16px 80px 52px;
}
.menu-navigation-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.menu-swiper .swiper-button-prev,
.menu-swiper .swiper-button-next {
  color: var(--color-red-500);
  --swiper-navigation-size: 18px;
  --swiper-navigation-sides-offset: 40px;
  --swiper-navigation-top-offset: calc(50% - 36px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid var(--color-neutrals-200);
  box-shadow: 0 2px 8px #0003;
}
.menu-swiper .swiper-notification {
  display: none;
}
.menu-swiper .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu-swiper .swiper-bullet {
  padding: 0;
  background-color: transparent;
  width: 24px;
  height: 24px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-swiper .swiper-bullet span {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 25px;
  margin: 0 7px;
  background: #8c8c8c;
  transition: all 0.3s ease;
}
.menu-swiper .swiper-bullet-active {
  width: 60px;
}
.menu-swiper .swiper-bullet-active span {
  background-color: var(--color-neutrals-600);
  width: 40px;
}
.menu-slider-card {
  border: 1px solid var(--color-neutrals-200);
  box-shadow: 0 8px 30px 4px #0003;
  min-height: 230px;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: var(--color-white);
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 350px;
  max-width: 600px;
  min-width: 600px;
}
.menu-slider-card-title {
  color: var(--color-neutrals-800);
  font-size: 32px;
  line-height: 32px;
}
.menu-slider-card-content {
  display: flex;
  flex: 1;
}
.menu-slider-card-description {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 7;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}
.menu-slider-card-price {
  font-size: 14px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.vertical-line {
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: var(--color-neutrals-200);
}
.menu-slider-card-calories {
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.menu-slider-card-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 528 / 352;
  align-self: center;
}
.menu-slider-card-header {
  align-self: flex-start;
}
.menu-slider-card-header,
.menu-slider-card-image {
  width: 100%;
  flex: 1;
}
.menu-slider-card-image img {
  scale: 1.3;
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: 160px;
}
.menu-slider-card-image .gif-paused-placeholder {
  width: 100%;
  height: auto;
}
.gif-paused-placeholder {
  background-color: var(--color-neutrals-100);
  border-radius: 12px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.menu-slider-card.direct-order-card {
  position: relative;
}
.menu-slider-card.direct-order-card .gif-paused-placeholder {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-neutrals-100);
  z-index: 0;
}
.menu-slider-card.direct-order-card > *:not(.gif-paused-placeholder) {
  position: relative;
  z-index: 1;
}
.menu-slider-card-buttons {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.menu-slider-card-buttons button,
.direct-order-card-buttons button {
  flex: 1;
  font-size: 16px;
  line-height: 24px;
  text-transform: capitalize;
}
.sold-out-card {
  position: relative;
  opacity: 0.7;
}
.sold-out-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
}
.disabled-button {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.disabled-button:hover {
  opacity: 0.5;
}
.full-width-button {
  width: 100%;
  flex: 1;
}
.menu-slider-card-header h2 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.menu-slider-card-header h2 span {
  font-size: 40px;
  line-height: 40px;
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
}
.direct-order-card-buttons {
  margin-top: auto;
  text-align: end;
}
.direct-order-card-buttons button {
  text-transform: capitalize;
}
@media (min-width: 640px) {
  .menu-swiper .swiper-slide {
    width: fit-content;
  }
}
@media (max-width: 640px) {
  .menu-slider {
    animation: slideInFromRight 0.5s ease-out 0s forwards;
  }
  .menu-slider-container {
    padding: 0;
  }
  .menu-swiper {
    padding: 16px 16px 40px;
  }
  .menu-slider-card {
    padding: 16px;
    gap: 4px;
    min-width: auto;
    min-height: 200px;
  }
  .menu-slider-card-image {
    aspect-ratio: inherit;
  }
  .menu-slider-card-image img {
    max-height: 100px;
  }
  .menu-swiper .swiper-slide-prev,
  .menu-swiper .swiper-slide-next {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .menu-swiper .swiper-slide-prev .menu-slider-card,
  .menu-swiper .swiper-slide-next .menu-slider-card {
    transition: all 0.3s ease;
  }
  .menu-swiper .menu-slider-card-buttons button,
  .direct-order-card-buttons button {
    font-size: 16px;
    padding: 6px;
    line-height: 20px;
    text-transform: capitalize;
  }
  .menu-slider-card-header h2 {
    font-size: 20px;
    line-height: 20px;
    color: var(--color-neutrals-800);
  }
  .menu-slider-card-header h2 span {
    font-size: 36px;
    line-height: 36px;
    font-family: var(--font-hollie-script);
    color: var(--color-red-500);
  }
  .menu-slider-card-title {
    font-size: clamp(20px, 1vw, 32px);
    line-height: clamp(20px, 1vw, 32px);
  }
  .menu-slider-card-description {
    font-size: clamp(14px, 1vw, 20px);
    line-height: clamp(14px, 1vw, 20px);
    -webkit-line-clamp: 6;
  }
  .menu-slider-card-price {
    font-size: 12px;
    line-height: 14px;
    white-space: nowrap;
  }
}
@media (max-width: 375px) {
  .menu-slider-card {
    min-height: 160px;
  }
  .menu-slider-card-title {
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .menu-swiper .menu-slider-card-buttons button,
  .direct-order-card-buttons button {
    font-size: 12px;
    line-height: 16px;
    min-width: 90px;
  }
  .menu-slider-card-description {
    font-size: clamp(12px, 1vw, 20px);
    line-height: clamp(12px, 1vw, 20px);
    -webkit-line-clamp: 3;
  }
}
@keyframes slideOutCharacter {
  0% {
    left: 15%;
  }
  to {
    left: -100%;
  }
}
@keyframes floatAndRotate {
  0%,
  to {
    transform: translateY(0) rotate(0);
  }
  25% {
    transform: translateY(-20px) rotate(2deg);
  }
  50% {
    transform: translateY(-10px) rotate(-1deg);
  }
  75% {
    transform: translateY(-20px) rotate(1deg);
  }
}
@keyframes slideInFromRight {
  0% {
    transform: translate(100%);
    opacity: 0;
  }
  to {
    transform: translate(0);
    opacity: 1;
    visibility: visible;
  }
}
.gif-paused-placeholder {
  background-color: var(--color-neutrals-100, #f0f0f0);
  border-radius: 8px;
  width: 100%;
  height: 100%;
  min-height: 40px;
  position: relative;
  overflow: hidden;
}
.gif-paused-placeholder:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, #00000014, #ffffff14);
  mix-blend-mode: multiply;
}
.selected-product-detail-wrapper {
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 24px;
}
.selected-product-detail-image {
  width: 100%;
  max-width: 628px;
}
.selected-product-detail-image img {
  width: 100%;
  height: 100%;
}
.selected-product-detail-info {
  padding: 40px;
}
.selected-product-detail-info-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
.selected-product-detail-info-header h3 {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-neutrals-800);
}
.order-details-modal-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.selected-product-description-wrapper {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.selected-product-description {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.selected-product-price-and-btn-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.selected-product-price-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: space-between;
}
.selected-product-price-wrapper .quantity-selector {
  width: 144px;
}
.selected-product-price-wrapper .quantity-selector .quantity-value {
  min-width: unset;
  flex: 1;
}
.selected-product-details-btn-wrapper {
  display: flex;
  gap: 8px;
}
.selected-product-details-btn-wrapper .add-to-bag-btn {
  gap: 8px;
  min-width: auto;
}
.selected-product-price-wrapper h4 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.selected-product-quantity-button-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.location-link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-neutrals-800);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.3s ease;
}
.location-link-button:hover {
  color: var(--color-red-500);
  background: none;
}
@media (max-width: 768px) {
  .selected-product-detail-wrapper {
    flex-direction: column;
    align-items: normal;
    gap: 16px;
  }
  .selected-product-detail-info-header {
    margin-bottom: 0;
  }
  .selected-product-detail-info {
    padding: 0;
  }
  .selected-product-price-and-btn-wrapper {
    gap: 12px;
  }
  .selected-product-detail-info-header h3 {
    font-size: 32px;
    line-height: 32px;
  }
  .selected-product-description {
    font-size: 16px;
    line-height: 24px;
  }
  .selected-product-price-wrapper h4 {
    font-size: 28px;
    line-height: 28px;
  }
  .selected-product-description-wrapper {
    gap: 24px;
  }
  .selected-product-additional-info-wrapper {
    margin-top: 32px;
  }
  .selected-product-detail-image {
    max-width: 500px;
    margin: auto;
  }
  .quantity-selector {
    flex-shrink: 0;
  }
  .selected-product-quantity-button-wrapper {
    flex-wrap: nowrap;
    width: 100%;
  }
  .selected-product-details-btn-wrapper:has(.add-to-bag-btn:not(.v4-btn)),
  .selected-product-details-btn-wrapper .add-to-bag-btn:first-child {
    width: 100%;
  }
}
@media (max-width: 576px) {
  .selected-product-price-wrapper h4 {
    font-size: 22px;
    line-height: normal;
  }
  .selected-product-price-wrapper .quantity-selector {
    height: 42px;
    gap: 4px;
  }
  .selected-product-price-wrapper .quantity-selector .quantity-btn {
    height: 30px;
    width: 30px;
  }
  .selected-product-price-wrapper .quantity-selector .quantity-value {
    font-size: 16px;
  }
  .selected-product-details-btn-wrapper .add-to-bag-btn {
    padding: 7px 14px;
    font-size: 16px;
  }
}
@media (max-width: 460px) {
  .selected-product-details-btn-wrapper,
  .selected-product-details-btn-wrapper .add-to-bag-btn,
  .selected-product-price-wrapper .quantity-selector {
    width: auto;
  }
  .selected-product-price-and-btn-wrapper,
  .selected-product-price-wrapper {
    gap: 8px;
  }
}
@media (max-width: 350px) {
  .selected-product-price-and-btn-wrapper {
    flex-direction: column;
    gap: 12px;
  }
  .selected-product-price-wrapper .quantity-selector {
    width: 144px;
  }
}
.offer-tag-wrapper {
  position: relative;
  top: -5px;
  margin-top: -5px;
}
.offer-tag-wrapper .off-tag {
  margin-left: 8px;
  display: inline-block;
  align-items: center;
  position: relative;
  top: auto;
  animation: none;
}
.offer-tag-wrapper .badge-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.offer-tag-wrapper .badge-info-btn:focus {
  outline: none;
}
.offer-tag-wrapper .tooltip-description {
  margin: 0;
  font-size: 14px;
  color: #333;
}
.offer-tag-wrapper .off-tag-tooltip-modal-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.offer-tag-wrapper .off-tag-tooltip-description {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.offer-tag-wrapper .off-tag-tooltip-description p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
.offer-tag-wrapper .off-tag-tooltip-modal-container .dashed-line {
  border-top: 1px dashed #e0e0e0;
  margin: 0;
}
.offer-tag-wrapper .off-tag-tooltip-modal-container .flex-column {
  display: flex;
  flex-direction: column;
}
.offer-tag-wrapper .off-tag-tooltip-modal-container .gap-8 {
  gap: 8px;
}
.cart-item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  position: relative;
}
.cart-item-card:not(:last-child) {
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--color-neutrals-100);
}
.cart-item-details-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-item-image {
  flex-shrink: 0;
  max-width: 150px;
}
.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  scale: 1.4;
  mix-blend-mode: multiply;
}
.cart-item-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-item-title {
  font-size: 24px;
  line-height: 24px;
  color: var(--color-neutrals-800);
}
.cart-item-description {
  font-size: 14px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.cart-item-right-section {
  display: flex;
  align-items: center;
  gap: 24px;
}
.cart-item-fav-btn-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-item-fav-btn-wrapper button {
  width: 48px;
  height: 48px;
}
.cart-item-edit-btn {
  background: transparent;
  border: none;
  color: var(--color-neutrals-800);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.cart-item-edit-btn:hover {
  background: transparent;
  color: var(--color-red-500);
}
.cart-item-price-qty-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-item-price {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
  min-width: 55px;
  text-align: right;
}
.heart-loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.heart-loading-spinner .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid var(--color-red-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.bag-order-item-card {
  border-bottom: 1px dashed var(--color-neutrals-100);
  padding: 8px 0;
  position: relative;
}
.bag-section-container .bag-order-item-card .dashed-line {
  margin: 16px 0;
}
.bag-order-item-card .clear-btn {
  font-family: var(--font-myriad-pro-semibold-condensed);
  width: fit-content;
  line-height: 16px;
}
.bag-order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.bag-order-header p {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
}
.bag-order-info-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.bag-order-info {
  display: flex;
  align-items: center;
  gap: 35px;
}
.modifier-order-info {
  align-items: center;
}
.bag-order-info-right {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.bag-order-info-right .quantity-selector,
.bag-modifier-items-container .quantity-selector {
  width: 144px;
}
.bag-order-info-right .quantity-selector .quantity-value,
.bag-modifier-items-container .quantity-selector .quantity-value {
  min-width: unset;
  flex: 1;
}
.cart-item-option-btn {
  background: var(--color-white);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-neutrals-800);
  padding: 0;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 50%;
}
.option-button-container {
  position: relative;
}
.cart-item-option-btn:hover {
  background: transparent;
  border-color: var(--color-neutrals-200);
}
.cart-item-option-btn.active {
  background: var(--color-neutrals-200);
  border-color: var(--color-neutrals-200);
}
.option-button-dropdown {
  width: 160px;
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 0 20px 4px #d8d8d852;
  padding: 4px;
  position: absolute;
  bottom: calc(100% + 4px);
}
.option-button-dropdown-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
  border-radius: 4px;
  background: var(--color-white);
  border: none;
}
.option-button-dropdown-item:hover {
  background: transparent;
}
.option-button-dropdown-item svg {
  flex-shrink: 0;
}
.bag-modifier-items-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bag-modifier-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  padding-left: 12px;
}
@media (max-width: 1260px) {
  .bag-order-info-container {
    gap: 16px;
    flex-direction: column;
    align-items: start;
  }
}
@media (max-width: 768px) {
  .bag-order-item-card {
    padding: 16px;
  }
  .bag-order-header {
    margin-bottom: 8px;
  }
  .bag-order-header p {
    font-size: 16px;
    line-height: 24px;
  }
  .bag-order-info-container {
    flex-direction: column;
    gap: 0px;
    align-items: start;
  }
  .cart-item-image {
    max-width: 130px;
  }
  .bag-order-info-right {
    width: 100%;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }
  .cart-item-title {
    font-size: 20px;
    line-height: 20px;
    margin-bottom: 4px;
  }
  .cart-item-description {
    font-size: 14px;
    line-height: 16px;
  }
  .cart-item-price {
    font-size: 16px;
    line-height: 24px;
    min-width: 45px;
  }
  .cart-item-price-qty-wrapper {
    width: 100%;
  }
  .cart-item-price-qty-wrapper .cart-item-price {
    margin-left: auto;
  }
  .cart-item-price-qty-wrapper.modifier-price-qty-wrapper {
    justify-content: flex-end;
  }
  .bag-modifier-item {
    display: block;
  }
  .bag-order-info-right .quantity-selector,
  .bag-modifier-items-container .quantity-selector {
    width: 127px;
  }
  .cart-item-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }
  .bag-order-info {
    width: 100%;
    gap: 20px;
  }
  .cart-item-info {
    flex: 1;
    gap: 0;
  }
  .cart-item-image img {
    scale: 1.25;
  }
  .cart-item-info-header .product-heart-btn {
    align-self: flex-start;
  }
  .cart-item-quantity-selector-wrapper {
    width: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
  }
}
.product-recommendation-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--color-neutrals-100);
  min-width: 250px;
  max-width: 250px;
  height: 100%;
  cursor: pointer;
}
.product-content {
  display: flex;
  gap: 12px;
}
.product-image-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 150px;
}
.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin-bottom: -16px;
}
.product-recommendation-heart-btn {
  position: absolute;
  top: 0;
  right: 0;
}
.product-recommendation-heart-btn .product-heart-btn {
  background-color: var(--color-white);
}
.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product-name {
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 20px;
  line-height: 24px;
  color: var(--color-neutrals-800);
}
.product-recommendation-card .product-name-text,
.mobile-product-recommendation-card .product-name-text {
  font-size: 16px;
  line-height: 16px;
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-neutrals-800);
}
.product-name-text span {
  font-size: 16px;
  line-height: 16px;
  font-family: var(--font-sink);
  color: var(--color-neutrals-800);
}
.product-recommendation-card .product-description-text,
.mobile-product-recommendation-card .product-description-text,
.product-description {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-500);
}
.product-calories {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  color: var(--color-neutrals-500);
}
.add-to-order-btn {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  margin-top: auto;
  transition: all 0.3s ease;
}
.add-to-order-btn.adding-to-basket {
  background-color: var(--color-success);
  transform: scale(0.95);
  animation: pulse 0.6s ease-in-out;
}
.mobile-add-to-bag-btn {
  transition: all 0.3s ease;
  min-width: unset;
}
.mobile-add-to-bag-btn.adding-to-basket {
  background-color: var(--color-success);
  transform: scale(0.9);
  animation: pulse 0.6s ease-in-out;
}
.mobile-add-to-bag-btn.adding-to-basket svg {
  animation: rotate 0.6s ease-in-out;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.add-to-order-btn:disabled,
.mobile-add-to-bag-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}
.off-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-white);
  width: calc(100% - 16px);
  border-radius: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  z-index: 99;
  animation: pulse 2s ease-in-out infinite;
  transform-origin: center;
}
.animations-paused .off-tag {
  animation: none !important;
}
.badge-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-info-btn:hover {
  background: transparent;
}
.badge-info-btn svg {
  width: 16px;
  height: 16px;
}
.product-recommendation-card .menu-badge .tooltip-wrapper {
  margin-right: -4px;
}
.product-recommendation-card .menu-badge {
  min-height: 28px;
}
.off-tag .off-tag-info-btn {
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 999;
}
.off-tag .off-tag-info-btn:hover {
  background: transparent;
}
.off-tag-tooltip-modal .modal-content {
  border-radius: 0;
}
.off-tag-tooltip-modal-container {
  padding: 16px;
}
.off-tag-tooltip-modal-container .dashed-line {
  margin: 8px 0;
}
.off-tag-tooltip-modal-container button {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
}
.off-tag-tooltip-description {
  display: flex;
  gap: 8px;
}
.off-tag-tooltip-description p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.product-recommendation-card-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: 12px;
}
.product-recommendation-card-footer .product-price {
  font-size: 16px;
  line-height: 20px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
@media screen and (max-width: 768px) {
  .product-recommendation-card {
    padding: 16px;
  }
  .product-image-container {
    max-height: 120px;
    flex: 1;
  }
  .product-name {
    font-size: 18px;
    line-height: 20px;
  }
  .product-description {
    line-height: 16px;
  }
  .product-price {
    font-size: 14px;
    line-height: 16px;
  }
  .product-recommendation-card .menu-badge {
    min-height: 20px;
    font-size: 12px;
    line-height: 12px;
  }
  .product-recommendation-card .badge-info-btn svg {
    width: 12px;
    height: 12px;
  }
}
.products-you-may-like {
  border: 1px solid var(--color-neutrals-100);
  border-radius: 20px;
  padding: 40px 0;
  background-color: var(--color-yellow-50);
  position: relative;
  max-width: 900px;
}
.products-swiper {
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
  padding-bottom: 20px;
}
.products-swiper .swiper-slide {
  width: fit-content;
  height: auto;
}
.product-navigation-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
}
.product-custom-bullets {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-width: 100%;
  padding: 0 4px;
  --swiper-scrollbar-sides-offset: 24px;
}
.swiper-scrollbar {
  display: none !important;
}
.product-custom-bullets::-webkit-scrollbar {
  display: none;
}
.product-navigation-wrapper .product-custom-bullets .swiper-bullet {
  background-color: var(--color-neutrals-300);
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.product-navigation-wrapper .product-custom-bullets .swiper-bullet-active {
  background-color: var(--color-neutrals-600);
  width: 24px;
  border-radius: 4px;
}
@media (max-width: 768px) {
  .products-swiper .swiper-slide {
    width: auto;
    height: auto;
  }
  .products-swiper .mobile-product-recommendation-card {
    max-width: none;
    width: 100%;
  }
}
#productsPrevRef,
#productsNextRef {
  background: var(--color-white);
  color: var(--color-neutrals-800);
  border: 1px solid var(--color-neutrals-800);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
  #productsPrevRef:hover,
  #productsNextRef:hover {
    background: var(--color-neutrals-800);
    color: var(--color-white);
  }
}
#productsPrevRef:active,
#productsNextRef:active {
  background: var(--color-neutrals-800);
  color: var(--color-white);
}
.products-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 0 40px;
}
.products-section-title h2 {
  font-size: 24px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.products-section-title p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-500);
}
.swiper-navigation {
  display: flex;
  gap: 8px;
}
.swiper-pagination-progressbar {
  position: relative;
  margin-top: 20px;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--color-neutrals-100);
  margin-left: auto;
  margin-right: auto;
}
.products-swiper .swiper-pagination-progressbar {
  width: calc(100% - 80px) !important;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  border-radius: 24px;
  background-color: var(--color-neutrals-400);
}
.products-swiper .mobile-product-recommendation-card {
  background-color: var(--color-white);
  border-radius: 16px;
  border: 1px solid var(--color-neutrals-100);
  padding: 16px;
  max-width: 340px;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.mobile-product-recommendation-card .off-tag {
  flex-shrink: 0;
  height: max-content;
  position: static;
}
.mobile-product-recommendation-card .product-description-text {
  line-clamp: unset;
  -webkit-line-clamp: unset;
}
.mobile-product-recommendation-card .product-price-btn-wrapper {
  margin-top: auto;
}
.mobile-product-recommendation-card .product-nutrition-wrapper {
  gap: 4px;
}
.products-swiper .past-product-card-header .product-heart-btn {
  margin-top: -4px;
  margin-right: -4px;
  width: 40px;
  height: 40px;
}
.products-swiper .mobile-add-to-bag-btn {
  bottom: 6px;
  right: 6px;
}
.products-you-may-like .past-order-card {
  max-width: 340px;
  background-color: var(--color-white);
  border: 1px solid var(--color-neutrals-100);
}
.products-you-may-like .reward-product-detail-card-image {
  width: 108px;
  height: 178px;
}
@media (max-width: 768px) {
  .products-you-may-like {
    margin: 0 -16px;
    border: unset;
    border-radius: unset;
    padding: 12px 0;
  }
  .products-section-header {
    padding: 0 16px;
    align-items: center;
    margin-bottom: 12px;
  }
  .products-section-title-mobile h2 {
    font-size: 20px;
    line-height: 24px;
    font-family: var(--font-myriad-pro-black-condensed);
    white-space: nowrap;
  }
  .products-section-title-mobile p {
    font-size: 14px;
    line-height: 20px;
    font-family: var(--font-myriad-pro-semibold-condensed);
  }
  .products-you-may-like .products-swiper .mobile-product-image {
    width: 100px;
    height: 100px;
  }
  .product-navigation-wrapper {
    max-width: calc(100vw - 32px);
    justify-content: flex-start;
  }
  .product-custom-bullets {
    justify-content: flex-start;
    gap: 4px;
  }
  .product-navigation-wrapper .product-custom-bullets .swiper-bullet {
    width: 6px;
    height: 6px;
  }
  .product-navigation-wrapper .product-custom-bullets .swiper-bullet-active {
    width: 20px;
  }
}
.my-bag-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  background-color: #0000;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  transition: background-color 0.3s ease-in-out;
}
.my-bag-modal-overlay.my-bag-modal-overlay-open {
  background-color: #00000080;
}
.my-bag-modal {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  width: 100%;
  max-width: 420px;
  height: 100%;
  transform: translate(100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.my-bag-modal .dashed-line {
  width: calc(100% - 48px);
  margin: auto;
}
.my-bag-modal.my-bag-modal-open {
  transform: translate(0);
}
.my-bag-modal.my-bag-modal-closing {
  transform: translate(100%);
  transition: transform 0.3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}
.my-bag-modal-content {
  flex: 1;
  overflow-y: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.modal-bag-checkout-container {
  padding: 32px 24px 24px;
}
.modal-bag-checkout-btn-container {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 24px;
}
.modal-bag-checkout-btn-container button {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  gap: 8px;
}
.bag-modal-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}
.bag-modal-header-content h2 {
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-neutrals-800);
}
.my-bag-modal-content .bag-summary-address {
  padding: 16px 24px;
  justify-content: space-between;
}
.my-bag-modal-content .cart-items-container {
  padding: 16px 24px;
}
.my-bag-modal-content .cart-item-card {
  flex-direction: column;
  margin-bottom: 0;
  gap: 8px;
}
.my-bag-modal-content .cart-item-right-section {
  width: 100%;
}
.my-bag-modal-content .cart-item-price-qty-wrapper {
  width: 100%;
  justify-content: space-between;
}
.my-bag-modal-content .cart-item-edit-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
}
.my-bag-modal-content .product-heart-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.gap-8 {
  gap: 8px;
}
.my-bag-modal-content .products-you-may-like {
  border: unset;
  border-radius: unset;
  padding: 24px 0;
}
.my-bag-modal-content .products-you-may-like .products-section-header {
  padding: 0 24px;
}
.my-bag-modal-footer {
  border-top: 1px solid var(--color-neutrals-100);
  box-shadow: 0 0 20px 4px #d8d8d852;
}
.menu-page {
  background-color: var(--color-white);
}
.menu-card-section-wrapper {
  background-color: var(--color-white);
  padding: 40px;
}
.menu-card-section-content-wrapper {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.menu-card-section-title {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-neutrals-800);
  margin-bottom: 8px;
}
.menu-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.menu-stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.menu-stat {
  background: var(--color-neutrals-100);
  color: var(--color-neutrals-600);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
}
.authenticated-user-menu-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-order-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
  border: none;
  transition: all 0.2s ease;
}
.group-order-btn:hover {
  background: transparent;
  color: var(--color-red-500);
  text-decoration: underline;
}
.menu-card-wrapper,
.selected-menu-items-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 24px;
  list-style: none;
}
.menu-card-section-title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.menu-card-section-title-wrapper button {
  font-size: 16px;
  line-height: 24px;
  gap: 8px;
}
.view-toggle-buttons {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.view-toggle-buttons button {
  flex: 1;
  min-width: 100px;
  font-size: 14px;
}
.selected-menu-items-wrapper .product-name-text {
  font-family: var(--font-sink);
}
@media (max-width: 768px) {
  .menu-card-section-wrapper {
    padding: 20px 16px 40px;
  }
  .menu-card-section-title {
    font-size: 40px;
    line-height: 40px;
    text-align: center;
  }
  .menu-card-wrapper,
  .selected-menu-items-wrapper {
    grid-template-columns: 1fr;
  }
  .menu-card-wrapper-list.menu-card-wrapper {
    gap: 0px;
    margin: 0 -16px;
  }
  .menu-card-wrapper-single.menu-card-wrapper {
    gap: 16px;
  }
  .menu-card-wrapper-double.menu-card-wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .menu-card-wrapper-double.menu-card-wrapper .fresh-design-menu-card {
    padding: 16px;
    text-align: center;
  }
  .menu-card-wrapper-double.menu-card-wrapper
    .fresh-design-menu-card
    .menu-card-hover-overlay {
    width: calc(100% - 32px);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .selected-menu-items-wrapper {
    gap: 12px;
  }
  .menu-card-section-title-wrapper {
    justify-content: center;
    margin-bottom: 16px;
  }
  .menu-card-section-title-wrapper button {
    flex: 1;
  }
  .authenticated-user-menu-btns {
    flex-direction: column;
    width: 100%;
  }
  .authenticated-user-menu-btns .view-my-favorites-btn {
    width: 100%;
  }
}
.delivery-options-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.delivery-options-section .checkbox-label {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-primary);
  margin: 0;
}
.delivery-options-section .delivery-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.delivery-options-section .delivery-input-container .input-container {
  flex: 1;
}
.delivery-options-section .mobile-add-to-bag-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-neutrals-300);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: static;
}
.delivery-options-section .custom-checkbox-icon {
  margin-top: 0 !important;
}
.delivery-options-section .custom-checkbox {
  align-items: center !important;
}
.delivery-options-section .mobile-add-to-bag-btn:hover {
  background-color: var(--color-neutrals-50);
  border-color: var(--color-neutrals-400);
}
.delivery-options-section .mobile-add-to-bag-btn:active {
  transform: scale(0.95);
}
.delivery-options-section .mobile-add-to-bag-btn:focus {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
.bag-summary-address {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.bag-summary-address .header-selected-location-wrapper {
  flex: 1;
  min-width: 0;
}
.delivery-options-section .checkbox-container,
.delivery-options-section .input-field-container {
  margin-bottom: 12px;
}
.delivery-options-section .checkbox-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}
.delivery-options-section .input-field {
  width: 100%;
}
.bag-summary-address .custom-checkbox-icon {
  margin-top: 0;
}
.bag-summary-address-container.bag-summary-address {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.bag-summary-address-delivery {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.bag-summary-address-checkbox {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin-left: 13px;
}
.bag-summary-tooltip-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bag-summary-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bag-summary-item,
.bag-checkout-total {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.bag-summary-item dt,
.bag-summary-item dd {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.bag-summary-item p button {
  margin-left: 4px;
}
.bag-section-container .dashed-line {
  margin: 24px 0;
}
.bag-summary-tip-container h2 {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.tip-input-container {
  margin-top: 12px;
}
.bag-summary-tip-container .location-tab {
  margin-top: 0;
  gap: 4px;
}
.bag-summary-tip-container .location-tab .tab-button {
  padding: 4px;
  font-size: 14px;
  line-height: 20px;
  min-width: auto;
}
.bag-checkout-total dt,
.bag-checkout-total dd,
.bag-checkout-total dd span {
  font-size: 20px;
  line-height: 20px;
  font-family: var(--font-sink);
  color: var(--color-neutrals-600);
}
.bag-checkout-total-price {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bag-checkout-total-price del {
  font-size: 20px;
  line-height: 20px;
  margin-top: -4px;
  color: var(--color-neutrals-400);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.bag-checkout-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.promo-apply-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  padding: 4px 4px 4px 8px;
  background-color: var(--color-neutrals-100);
  font-family: var(--font-myriad-pro-semibold-condensed);
  color: var(--color-neutrals-600);
  margin-left: 4px;
}
.promo-apply-tag svg {
  cursor: pointer;
}
.terms-link {
  color: inherit;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}
.terms-link:hover {
  text-decoration: underline;
  background: none;
}
.terms-link:focus {
  outline: 2px solid var(--color-red-500);
  outline-offset: 2px;
  border-radius: 2px;
}
.tooltip-notes {
  font-size: 12px;
  color: var(--color-neutrals-500);
  margin-top: -4px;
  padding-left: 8px;
}
.checkout-btn span {
  position: absolute;
  right: 16px;
}
.bag-summary-item .filters-clear-btn {
  margin-left: 4px;
}
@media (max-width: 768px) {
  .bag-section-container .dashed-line {
    margin: 8px 0;
  }
  .bag-summary-container .bag-summary-item p,
  .bag-summary-tip-container h2 {
    font-size: 16px;
    line-height: 24px;
  }
  .bag-checkout-container {
    gap: 8px;
    margin-top: 14px;
  }
  .bag-checkout-total {
    align-items: center;
    min-height: 40px;
  }
}
.coupon-promo-error-modal .fav-modal-header h3 {
  color: var(--color-red-600);
}
.coupon-promo-error-modal .fav-modal-header p {
  font-size: 20px;
  line-height: 28px;
}
.coupon-promo-error-modal .fav-modal-button-container {
  margin-top: 8px;
}
.empty-cart-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}
.empty-cart-message {
  font-size: 20px;
  line-height: 24px;
  color: var(--color-neutrals-800);
}
.empty-cart-description {
  font-size: 14px;
  line-height: 18px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.bag-section-header .sections-title {
  text-transform: none;
}
.bag-section-content {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 20px;
  padding: 24px;
}
.bag-items-list .bag-item-wrapper:last-child {
  border-bottom: unset;
}
.group-order-host-buttons {
  display: flex;
  align-items: center;
}
.group-order-btn--share {
  color: #dc2626;
}
.bag-section-header-left {
  display: flex;
  align-items: center;
  gap: 5px;
}
.group-order-btn--share:hover {
  color: #b91c1c;
}
.group-order-btn--cancel {
  color: #000;
}
.group-order-btn--cancel:hover {
  color: #374151;
}
.cancel-group-order-modal {
  padding: 0;
}
.cancel-group-order-header {
  text-align: center;
  padding: 24px 24px 0;
}
.cancel-group-order-header h2 {
  font-size: 40px;
  text-align: left;
  line-height: 41px;
}
.cancel-group-order-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-neutrals-900);
  margin: 0 0 16px;
  line-height: 1.2;
}
.cancel-group-order-description {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-500);
  text-align: left;
}
.cancel-group-order-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  width: 100%;
}
.cancel-group-order-btn--never-mind {
  background-color: #dc2626;
  color: #fff;
  border: 2px solid #dc2626;
}
.cancel-group-order-btn--never-mind:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}
.cancel-group-order-btn--confirm {
  background-color: #fff;
  color: #000;
  border: 2px solid #000000;
}
.cancel-group-order-btn--confirm:hover {
  background-color: #f3f4f6;
}
.cancel-group-order-footer {
  text-align: center;
  padding: 0 24px 24px;
}
.cancel-group-order-faq-link {
  color: #6b7280;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 500;
}
.cancel-group-order-faq-link:hover {
  color: #374151;
}
.leave-group-order-modal {
  padding: 0;
}
.leave-group-order-header {
  text-align: center;
  padding: 24px 24px 0;
}
.leave-group-order-header h2 {
  font-size: 40px;
  text-align: left;
  line-height: 41px;
}
.leave-group-order-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-neutrals-900);
  margin: 0 0 16px;
  line-height: 1.2;
}
.leave-group-order-description {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-500);
  text-align: left;
}
.leave-group-order-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  width: 100%;
}
.leave-group-order-btn--never-mind {
  background-color: #dc2626;
  color: #fff;
  border: 2px solid #dc2626;
}
.leave-group-order-btn--never-mind:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}
.leave-group-order-btn--confirm {
  background-color: #fff;
  color: #000;
  border: 2px solid #000000;
}
.leave-group-order-btn--confirm:hover {
  background-color: #f3f4f6;
}
.leave-group-order-footer {
  text-align: center;
  padding: 0 24px 24px;
}
.leave-group-order-faq-link {
  color: #6b7280;
  text-decoration: underline;
  font-size: 14px;
  font-weight: 500;
}
.leave-group-order-faq-link:hover {
  color: #374151;
}
.bag-items-list {
  list-style: none;
}
.bag-items-list li {
  display: contents;
}
@media (max-width: 768px) {
  .bag-section-content {
    padding: 0;
    margin-bottom: 16px;
  }
  .cancel-group-order-modal,
  .leave-group-order-modal {
    padding: 16px;
  }
  .cancel-group-order-buttons {
    gap: 10px;
  }
  .cancel-group-order-btn {
    padding: 14px 20px;
    font-size: 15px;
  }
}
.share-invite-modal {
  max-width: 480px;
  width: 100%;
}
.share-invite-modal-content {
  padding: 40px;
}
.share-invite-header {
  text-align: center;
}
.share-invite-title {
  font-size: 40px;
  line-height: 41px;
  font-weight: 700;
  color: var(--color-neutrals-800);
  font-family: var(--font-sink);
  margin: 0 0 16px;
  line-height: 1.2;
  text-align: left;
}
.share-invite-description {
  font-size: 16px;
  line-height: 22px;
  color: var(--color-neutrals-500);
  margin: 0 0 20px;
  text-align: center;
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-weight: 600;
  text-align: left;
}
.share-invite-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.share-invite-qr-section .qr-code-container {
  margin: 0 0 10px;
}
.share-invite-instructions {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-600);
  margin: 0;
  text-align: center;
  max-width: 300px;
}
.share-invite-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.share-invite-copy-btn {
  width: 100%;
  min-width: 100%;
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-weight: 900;
}
.share-invite-faq-link-container {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-weight: 600;
}
.share-invite-faq-link {
  color: var(--color-neutrals-800);
  text-decoration: underline;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s ease;
  margin-left: 5px;
  font-weight: 900;
}
.share-invite-faq-link:hover {
  color: var(--color-neutrals-600);
}
@media (max-width: 768px) {
  .share-invite-modal {
    margin: 16px;
    max-width: calc(100vw - 32px);
  }
  .share-invite-title {
    font-size: 20px;
  }
  .share-invite-description {
    font-size: 14px;
  }
  .share-invite-instructions {
    font-size: 13px;
  }
}
.group-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-neutrals-100);
  gap: 15px;
}
.group-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-neutrals-900);
  margin: 0;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
@media (max-width: 768px) {
  .group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 0;
  }
  .group-header h2 {
    font-size: 16px;
  }
}
.reward-error-modal {
  max-width: 480px;
}
.reward-error-modal-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.reward-error-modal-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reward-error-modal-text h3 {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-red-600);
}
.reward-error-modal-text p {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.reward-error-modal-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reward-error-modal-buttons button {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: 768px) {
  .reward-error-modal-content {
    padding: 16px;
  }
  .reward-error-modal-text h3 {
    font-size: 24px;
    line-height: 30px;
  }
  .reward-error-modal-text p {
    font-size: 16px;
    line-height: 24px;
  }
}
.reward-product-detail-card {
  background: var(--color-yellow-100);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 280px;
  position: relative;
}
.reward-product-detail-card.expired {
  opacity: 0.6;
  cursor: not-allowed;
}
.reward-product-detail-card .mobile-add-to-bag-btn {
  bottom: 12px;
  right: 12px;
}
.reward-product-detail-card .mobile-add-to-bag-btn:disabled {
  cursor: not-allowed;
  background-color: var(--color-neutrals-100);
  border-color: var(--color-neutrals-100);
  color: var(--color-neutrals-300);
}
.rewards-banner-card-content .rewards-banner-card-remove-btn {
  background: var(--color-green-400);
  border: 2px solid var(--color-green-400);
  gap: 8px;
  color: var(--color-white);
}
.rewards-banner-card-content .rewards-banner-card-remove-btn:hover {
  background: var(--color-green-500);
}
.rewards-banner-character-icon-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  max-height: 125px;
  flex: 1;
  height: 100%;
}
.rewards-points-content-title-wrapper {
  padding: 8px;
  background-color: var(--color-red-500);
  width: 100%;
}
.rewards-points-content-title-wrapper.applied {
  background-color: var(--color-green-400);
}
.rewards-points-content-title-wrapper .rewards-points-content-title span {
  font-size: 18px;
  line-height: 18px;
  color: var(--color-white);
  font-family: var(--font-myriad-pro-black-condensed);
}
.rewards-points-content-title-wrapper .rewards-points-content-title {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-white);
  text-align: center;
}
.reward-product-detail-card-content,
.reward-product-detail-description {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reward-product-detail-card-header p {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-red-600);
}
.reward-product-detail-card-header p span {
  color: var(--color-red-600);
  font-size: 24px;
  line-height: 24px;
  font-family: var(--font-hollie-script);
}
.reward-product-detail-title {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.2px;
  color: var(--color-neutrals-800);
}
.reward-product-detail-description-text,
.reward-product-detail-expiry-date {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.reward-product-detail-expiry-date {
  color: var(--color-blue-700);
}
.reward-product-detail-card-image {
  width: 92px;
  height: 160px;
  flex-shrink: 0;
}
.reward-product-detail-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.reward-swiper {
  width: 100%;
  -webkit-user-select: none;
  user-select: none;
  padding: 16px;
}
.reward-product-card {
  background: var(--color-yellow-100);
  border-radius: 16px;
  padding: 16px;
  min-height: 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
  max-height: 128px;
  max-width: 280px;
}
.reward-product-card.applied {
  border: 1px solid var(--color-green-500);
}
.reward-product-card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reward-product-card-title {
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-neutrals-800);
}
.reward-product-card-price-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reward-product-card-price-wrapper .character-logo-icon {
  flex-shrink: 0;
  color: var(--color-neutrals-500);
  margin-bottom: -32px;
}
.reward-product-card-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin: auto auto 12px;
}
.reward-product-card-price h3 {
  letter-spacing: 0;
  font-size: 40px;
  line-height: 40px;
  color: var(--color-red-500);
}
.reward-product-card-price p {
  font-size: 24px;
  line-height: 0px;
  font-family: var(--font-hollie-script);
  transform: rotate(-4deg);
  letter-spacing: 0;
  color: var(--color-red-500);
  margin-left: 8px;
  margin-top: 8px;
}
.reward-product-card-price-wrapper .mobile-add-to-bag-btn {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.vehicle-details-modal.modal {
  max-width: max-content;
}
.vehicle-details-modal .modal-content {
  background-color: transparent;
  overflow-y: hidden;
}
.vehicle-details-wrapper {
  display: flex;
  gap: 8px;
  height: 72.2vh;
}
.vehicle-details-content {
  background-color: var(--color-white);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vehicle-details-header,
.other-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-yellow-50);
  padding: 24px;
  border-bottom: 1px solid var(--color-neutrals-100);
  height: 80px;
}
.vehicle-details-header h2 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
  margin-top: 4px;
}
.vehicle-detail-body {
  padding: 24px;
  flex: 1;
  overflow: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-header h3 {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
}
.color-grid,
.vehicle-type-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}
.color-option {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 16px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 56px;
  white-space: nowrap;
  min-width: 144px;
}
.color-option:hover {
  background: none;
  border-color: var(--color-yellow-500);
}
.color-option.selected {
  border-color: var(--color-red-500);
  box-shadow: 0 0 8px 4px #d8d8d852;
}
.color-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-neutrals-100);
}
.color-name,
.vehicle-name {
  font-size: 16px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
  line-height: 24px;
}
.vehicle-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 16px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 108px;
}
.vehicle-type-option:hover {
  border-color: var(--color-yellow-500);
  background: none;
}
.vehicle-type-option.selected {
  border-color: var(--color-red-500);
  box-shadow: 0 0 8px 4px #d8d8d852;
  background: none;
}
.vehicle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.vehicle-icon svg {
  color: var(--color-neutrals-600);
}
.vehicle-details-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--color-neutrals-100);
  box-shadow: 0 0 20px 4px #d8d8d852;
  gap: 8px;
}
.other-details-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 448px;
}
.other-section {
  background-color: var(--color-white);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.other-section-header h3 {
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 20px;
  line-height: 28px;
}
.other-section .input-container {
  padding: 24px;
}
.vehicle-details-footer button {
  gap: 8px;
}
@media (max-width: 768px) {
  .vehicle-details-wrapper {
    height: 100%;
  }
  .vehicle-details-content {
    border-radius: unset;
  }
  .vehicle-details-header,
  .vehicle-detail-body {
    padding: 24px 16px;
  }
  .color-grid,
  .vehicle-type-grid {
    display: flex;
    flex-wrap: wrap;
  }
  .color-option,
  .vehicle-type-option {
    flex: 1;
  }
  .vehicle-type-option {
    min-width: 130px;
  }
  .vehicle-details-footer {
    padding: 12px 16px 16px;
  }
  .vehicle-details-footer button {
    flex: 1;
  }
  .other-section .input-container {
    padding: 0;
  }
  .vehicle-color-section .input-container,
  .vehicle-type-section .input-container {
    margin-bottom: 24px;
  }
}
.my-bag-page {
  background-color: var(--color-white);
}
.my-bag-content-wrapper {
  background-image: url(/images/account-bg-CJ3xRhfr.png);
  background-size: auto;
  background-position: top left;
  background-repeat: repeat;
  padding: 40px;
  background-size: 1%;
}
.my-bag-content {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.my-bag-main-section-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.bag-orders-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}
.bag-orders-section .products-you-may-like {
  display: grid;
}
.bag-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.bag-section-header .add-products-btn {
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
}
.bag-section-container {
  background-color: var(--color-white);
  border-radius: 20px;
  border: 1px solid var(--color-neutrals-100);
}
.bag-section-container .dashed-line.coupon-code-dashed-line {
  width: calc(100% - 80px);
  margin: 20px auto;
}
.bag-section-clear-btn-wrapper {
  text-align: right;
}
.summary-section {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.summary-section .sticky-top {
  position: sticky;
  top: 95px;
  z-index: 9;
}
.summary-section .bag-summary-address .end-content-title,
.summary-section .bag-summary-address .selected-location-restaurant-name {
  font-size: 16px;
  line-height: 18px;
  margin-bottom: 5px;
}
.summary-section .bag-summary-address .selected-location-address {
  font-size: 14px;
  line-height: 16px;
}
.bag-summary-icon-wrapper {
  min-width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bag-summary-address {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.summary-section .bag-summary-address:not(:last-child) {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--color-neutrals-100);
}
.my-bag-page .summary-section {
  margin-bottom: 12px;
}
.summary-section .bag-summary-address .selected-location-icon-container,
.summary-section .bag-summary-address .bag-summary-icon-wrapper {
  min-width: 54px;
}
.summary-section .bag-summary-address .bag-summary-icon-wrapper {
  margin-right: 8px;
}
.bag-summary-address .header-end-content-container {
  cursor: default;
}
.coupon-code-container,
.tip-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.coupon-code-container.error-state label,
.coupon-code-container.error-state input {
  color: var(--color-red-800) !important;
}
.coupon-code-container {
  padding: 40px 40px 0;
}
.coupon-code-container .mobile-add-to-bag-btn,
.tip-input-container .mobile-add-to-bag-btn {
  position: static;
}
.coupon-code-container .input-container {
  width: 100%;
}
.p-40 {
  padding: 40px;
}
.pb-40 {
  padding-bottom: 40px;
}
.unauthenticated-reward-product-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background-color: var(--color-yellow-100);
  border: 1px solid var(--color-neutrals-100);
  border-radius: 20px;
  max-height: 156px;
  overflow: hidden;
}
.unauthenticated-reward-product-card-title {
  font-size: 17px;
  letter-spacing: 0.2px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  text-transform: uppercase;
  text-align: center;
}
.unauthenticated-reward-product-card h5 sup {
  line-height: 14px;
  font-size: 12px;
}
.unauthenticated-reward-product-card .character-logo-icon {
  color: var(--color-neutrals-500);
  margin-top: auto;
}
.unauthenticated-reward-product-card .offer-container {
  margin: 0 0 8px;
}
.unauthenticated-reward-product-card .offer-container .offer-title {
  font-size: 24px;
}
.unauthenticated-reward-product-card .offer-container .offer-description {
  font-size: 17px;
}
.unauthenticated-reward-product-card button {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
}
.congratulations-modal-content {
  display: flex;
  align-items: center;
  gap: 24px;
  max-height: 204px;
  overflow: hidden;
  padding: 20px;
}
.congratulations-modal-content.discount-error-modal-content {
  max-height: unset !important;
}
.reward-applied-banner-content {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-red-600);
  padding: 18px 24px 18px 20px;
  width: max-content;
  background: var(--color-yellow-300);
  margin-bottom: 24px;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 6px) 6.25%,
    100% 12.5%,
    calc(100% - 6px) 18.75%,
    100% 25%,
    calc(100% - 6px) 31.25%,
    100% 37.5%,
    calc(100% - 6px) 43.75%,
    100% 50%,
    calc(100% - 6px) 56.25%,
    100% 62.5%,
    calc(100% - 6px) 68.75%,
    100% 75%,
    calc(100% - 6px) 81.25%,
    100% 87.5%,
    calc(100% - 6px) 93.75%,
    100% 100%,
    0 100%
  );
}
.reward-applied-banner-content-text h2 {
  font-size: 24px;
  line-height: 24px;
}
.reward-applied-banner-content-text p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.congratulations-modal-content .character-logo-icon {
  margin-top: auto;
  transform: rotate(8.43deg);
  margin-left: -20px;
  color: var(--color-neutrals-800);
  flex-shrink: 0;
}
.congratulations-modal-content h1 {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-red-600);
  text-align: left;
}
.congratulations-modal-content p {
  margin-top: 8px;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
  max-width: 190px;
}
.congratulations-modal-content.discount-error-modal-content p {
  max-width: unset !important;
  text-align: left;
}
.input-container.applied input {
  color: var(--color-green-500);
}
.input-container.applied .floating-label {
  color: var(--color-green-600);
}
.bag-footer {
  box-shadow: 0 0 20px 4px #d8d8d852;
  border-top: 1px solid var(--color-neutrals-100);
  padding: 12px 16px 16px;
}
.mb-24 {
  margin-bottom: 24px;
}
.bag-section-container.mobile-promo-section {
  padding-bottom: 16px;
  border: 1px solid var(--color-neutrals-100);
  border-radius: 16px;
  margin-top: 8px;
}
.mobile-promo-section .coupon-code-container {
  margin-bottom: 20px;
  padding: 16px 16px 0;
}
.mobile-promo-section .dashed-line.coupon-code-dashed-line {
  width: calc(100% - 32px);
  margin: 16px auto;
}
.mobile-promo-section .reward-disclaimer-text {
  padding: 0 16px;
}
.reward-swiper .swiper-pagination-progressbar {
  width: calc(100% - 80px) !important;
}
.reward-disclaimer-text {
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
  padding: 0 40px;
  margin-bottom: 12px;
}
@media (max-width: 768px) {
  .my-bag-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100dvh;
    position: relative;
  }
  .my-bag-breadcrumbs-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .my-bag-page .bag-footer {
    box-shadow: unset;
    border-top: none;
    padding: 0;
    background: transparent;
  }
  .my-bag-page .bag-checkout-container .checkout-btn {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 99;
    gap: 12px;
  }
  .my-bag-page .bag-checkout-container .checkout-btn span {
    position: unset;
  }
  .my-bag-page .bag-footer .bag-summary-tip-container {
    margin-bottom: 16px;
  }
  .my-bag-breadcrumbs-container .breadcrumbs-container {
    margin-bottom: 0;
    flex-shrink: 0;
    flex-wrap: nowrap;
  }
  .my-bag-page .my-bag-content-wrapper {
    background-image: none;
    background-color: var(--color-white);
    overflow-y: auto;
    overscroll-behavior-block: none;
    padding: 16px 16px 80px;
    flex: 1;
  }
  .my-bag-page .my-bag-content-wrapper .product-recommendation-card {
    min-width: 100%;
  }
  .my-bag-page .products-swiper {
    padding: 0;
  }
  .bag-section-container {
    border: unset;
    border-radius: unset;
    padding: 0;
  }
  .bag-section-header {
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 14px;
  }
  .bag-section-container.mobile-promo-section {
    margin-top: 16px;
  }
  .bag-section-header .authenticated-user-menu-btns {
    display: flex;
    flex-direction: row;
    width: max-content;
  }
  .bag-section-header .authenticated-user-menu-btns .group-order-btn {
    padding: 0;
  }
  .bag-section-header .authenticated-user-menu-btns .add-products-btn {
    padding: 8px 12px;
    gap: 4px;
  }
  .bag-section-header h2 {
    font-size: 20px;
    line-height: 20px;
    white-space: nowrap;
  }
  .congratulations-modal-content {
    max-height: 164px;
  }
  .congratulations-modal-content.coupon-error-modal-content {
    max-height: unset !important;
  }
  .congratulations-modal-content p {
    font-size: 16px;
    line-height: 24px;
    max-width: 100%;
  }
  .congratulations-modal-content h1 {
    font-size: 28px;
    line-height: 28px;
  }
  .bag-section-clear-btn-wrapper {
    margin: 8px 0;
  }
  .unauthenticated-reward-product-card {
    max-height: 136px;
    padding: 16px 24px;
  }
  .unauthenticated-reward-product-card .character-logo-icon {
    width: 110px;
    height: 170px;
  }
  .unauthenticated-reward-product-card button {
    font-size: 14px;
    line-height: 20px;
    padding: 4px 20px;
  }
  .summary-section {
    margin-bottom: 20px;
    max-width: unset;
  }
  .reward-swiper .swiper-pagination-progressbar {
    width: calc(100% - 32px) !important;
  }
  .reward-applied-banner-content {
    margin-left: -16px;
  }
  .reward-applied-banner-content svg {
    width: 44px;
    height: 44px;
  }
  .reward-applied-banner-content-text h2 {
    font-size: 20px;
    line-height: 20px;
  }
  .reward-applied-banner-content.green {
    background-color: var(--color-yellow-100);
  }
  .reward-applied-banner-content.green .reward-applied-banner-content-text,
  .reward-applied-banner-content.green .reward-icon {
    color: var(--color-green-500);
  }
  .my-bag-breadcrumbs-container .unauthenticated-reward-product-card {
    padding: 4px 8px;
  }
  .my-bag-breadcrumbs-container
    .unauthenticated-reward-product-card
    .character-logo-icon {
    display: none;
  }
  .my-bag-breadcrumbs-container .offer-text-and-button-wrapper {
    display: flex;
    gap: 4px;
    align-items: center;
  }
  .my-bag-breadcrumbs-container
    .unauthenticated-reward-product-card
    .offer-container {
    margin: 0;
  }
  .my-bag-breadcrumbs-container .offer-container .flex-item-center svg {
    width: 20px;
  }
  .my-bag-breadcrumbs-container
    .unauthenticated-reward-product-card
    .offer-container
    .offer-title {
    font-size: 12px;
    line-height: 14px;
  }
  .my-bag-breadcrumbs-container
    .unauthenticated-reward-product-card
    .offer-container
    .offer-description {
    font-size: 10px;
    line-height: 12px;
  }
  .my-bag-breadcrumbs-container .offer-container .offer-description sup {
    font-size: 8px;
    line-height: 8px;
    vertical-align: text-top;
  }
  .my-bag-breadcrumbs-container .unauthenticated-reward-product-card button {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 16px;
    min-width: unset;
    width: auto;
  }
  .my-bag-page .breadcrumbs-text {
    flex-shrink: 0;
  }
  .my-bag-breadcrumbs-container
    .unauthenticated-reward-product-card
    .unauthenticated-reward-product-card-title {
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 0;
    word-wrap: break-word;
  }
  .my-bag-breadcrumbs-container
    .unauthenticated-reward-product-card
    .unauthenticated-reward-product-card-title
    sup {
    line-height: 10px;
    font-size: 10px;
    vertical-align: text-top;
  }
  .my-bag-page
    .summary-section
    .bag-section-container:not(.mobile-promo-section) {
    background: var(--color-yellow-50);
    padding: 8px;
    border-radius: 16px;
  }
  .summary-section .bag-summary-address:not(:last-child) {
    padding-bottom: 4px;
    margin-bottom: 8px;
  }
}
@media (max-width: 370px) {
  .my-bag-breadcrumbs-container .breadcrumbs-container {
    flex-wrap: wrap;
  }
}
.checkout-upsell-modal {
  max-width: 1080px;
}
.checkout-upsell-modal--few-items {
  max-width: 720px;
}
.checkout-upsell-modal .modal-content {
  display: flex;
  flex-direction: column;
}
.checkout-upsell-modal-header {
  padding: 24px;
  border-bottom: 1px solid var(--color-neutrals-100);
}
.checkout-upsell-modal-header h2 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.checkout-upsell-modal-footer {
  padding: 24px;
  border-top: 1px solid var(--color-neutrals-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkout-upsell-modal-footer button {
  margin-left: auto;
}
.checkout-upsell-modal-content {
  background: var(--color-yellow-50);
  padding: 24px 0;
  flex: 1;
  overflow: auto;
  scrollbar-color: var(--color-neutrals-400) var(--color-white) !important;
  scrollbar-width: thin;
}
.checkout-upsell-modal .checkout-upsell-modal-content .modifier-section-header {
  margin: 0;
}
.checkout-upsell-modal-content .modifier-cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.checkout-upsell-modal--few-items
  .checkout-upsell-modal-content
  .modifier-cards-grid {
  grid-template-columns: repeat(2, 1fr);
}
.checkout-upsell-modal-content .modifier-card {
  width: 100%;
}
.checkout-upsell-modal-content .modifier-card .modifier-card-selection {
  display: none;
}
.checkout-upsell-modal-content .modifier-card .modifier-card-name {
  text-align: center;
}
.selected-upsell-product {
  font-size: 18px;
  line-height: 20px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.checkout-upsell-modal .modifier-section-title {
  display: none;
}
.checkout-upsell-modal .modifier-card-calories-price {
  justify-content: center;
}
@media (max-width: 768px) {
  .checkout-upsell-modal-header {
    padding: 16px;
  }
  .checkout-upsell-modal-header h2 {
    font-size: 24px;
    line-height: 24px;
  }
  .checkout-upsell-modal-content {
    padding: 16px 0;
  }
  .checkout-upsell-modal-content .modifier-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    margin-top: 0;
  }
  .checkout-upsell-modal-footer {
    padding: 16px;
  }
}
.add-card-details-modal-container {
  padding: 40px;
}
.add-card-details-modal-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.add-card-details-modal-header h3 {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-neutrals-800);
}
.add-card-details-modal-header p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.add-card-details-modal .dashed-line {
  margin: 20px 0;
}
.add-card-details-modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}
.add-card-details-modal-footer button {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
}
.card-details-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.field-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutrals-700);
  margin-bottom: 4px;
}
.loading-placeholder {
  height: 40px;
  background: transparent;
  border-bottom: 1px solid var(--color-neutrals-300);
  display: flex;
  align-items: center;
  padding: 0;
  color: var(--color-neutrals-500);
  font-size: 16px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  margin-top: 12px;
}
.field-error {
  color: var(--color-red-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  letter-spacing: 0px;
  margin-top: 4px;
}
.cvv-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cvv-field-wrapper .field-label,
.card-number-field-wrapper .field-label {
  font-size: 18px;
  font-family: var(--font-myriad-pro-black-condensed);
  color: var(--color-neutrals-800);
  margin-bottom: 4px;
}
.card-number-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pci-frame-container {
  width: 100%;
  height: 65px;
  border-bottom: 1px solid var(--color-neutrals-800);
  margin-top: 12px;
  background-color: transparent;
}
.pci-frame-container.has-error {
  border-bottom-color: var(--color-red-800);
  border-bottom-width: 2px;
}
.pci-frame-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 20px;
  padding: 10px 0;
  margin: 0;
}
.card-number-field-wrapper .pci-frame-container,
.cvv-field-wrapper .pci-frame-container {
  border-bottom: 1px solid var(--color-neutrals-800);
  margin-top: 12px;
  background-color: transparent;
}
.card-number-field-wrapper .pci-frame-container.has-error,
.cvv-field-wrapper .pci-frame-container.has-error {
  border-bottom-color: var(--color-red-800);
  border-bottom-width: 2px;
}
@media (max-width: 768px) {
  .add-card-details-modal-container {
    padding: 24px 16px;
  }
  .add-card-details-modal-header h3 {
    font-size: 32px;
    line-height: 32px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.payment-method-container .inline-card-form-container {
  background-color: var(--color-white);
  border-radius: 8px;
  margin-top: 16px;
}
.payment-method-container .inline-card-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.payment-method-container .inline-card-form-header:hover {
  background-color: var(--color-neutrals-50);
}
.payment-method-container .inline-card-form-header h4 {
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  margin: 0;
}
.payment-method-container .expand-collapse-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-neutrals-100);
  transition: background-color 0.2s ease;
}
.payment-method-container .inline-card-form-header:hover .expand-collapse-icon {
  background-color: var(--color-neutrals-200);
}
.payment-method-container .inline-card-form-content {
  padding: 12px 24px 24px;
}
.inline-card-form-content .form-field .input-wrapper .input {
  font-family: Arial, system-ui;
  font-size: 16px;
  font-weight: 500;
  color: var(--color-neutrals-800);
}
.inline-card-form-content .form-field .input-wrapper .input::placeholder {
  font-size: 16px;
}
.payment-method-container .form-description {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-600);
  margin: 16px 0;
}
.payment-method-container .card-details-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payment-method-container .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.payment-method-container .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60px;
}
.payment-method-container .field-label {
  font-family: var(--font-myriad-pro-black-condensed);
  font-size: 18px;
  line-height: 20px;
  color: var(--color-neutrals-800);
  margin: 0;
  position: absolute;
  top: 44%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.2s linear;
  pointer-events: none;
  z-index: 1;
}
.payment-method-container .field-label.field-label-loading {
  top: 56%;
}
.payment-method-container .pci-frame-container.focused + .field-label {
  top: 8px;
  left: 0;
  font-size: 16px;
}
.payment-method-container .card-number-field-wrapper,
.payment-method-container .cvv-field-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.payment-method-container .pci-frame-container {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  min-height: 40px;
  width: 100%;
  border: none !important;
  background: transparent !important;
  border-radius: 4px;
  overflow: hidden;
}
.payment-method-container .pci-frame-container.pci-ready {
  display: block;
}
.payment-method-container .pci-frame-container.pci-loading {
  display: none;
}
.payment-method-container .pci-frame-container iframe {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
  visibility: visible !important;
}
.payment-method-container .loading-placeholder {
  height: 40px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-neutrals-800);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 14px;
  color: var(--color-neutrals-500);
  margin-top: 12px;
  padding: 10px 0;
  width: 100%;
}
.payment-method-container .field-error {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-red-500);
  margin-top: 4px;
}
.payment-method-container .inline-card-form-footer {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.payment-method-container .inline-card-form-footer.flex-end {
  justify-content: flex-end;
}
.payment-method-container .inline-card-form-footer .custom-checkbox {
  align-items: center;
}
.inline-card-form-footer .custom-checkbox .custom-checkbox-icon {
  margin-top: 2px;
}
.payment-method-container .dashed-line {
  height: 1px;
  background: var(--color-yellow-50);
  margin: 18px 0;
}
.payment-method-container .save-card-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-800);
  margin-bottom: 8px;
  -webkit-user-select: none;
  user-select: none;
}
.payment-method-container .save-card-checkbox input[type='checkbox'] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.payment-method-container .checkmark {
  height: 18px;
  width: 18px;
  background-color: transparent;
  border: 2px solid var(--color-neutrals-400);
  border-radius: 3px;
  margin-right: 12px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.payment-method-container .save-card-checkbox input:checked ~ .checkmark {
  background-color: var(--color-primary-500);
  border-color: var(--color-primary-500);
}
.payment-method-container .checkmark:after {
  content: '';
  position: absolute;
  display: none;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.payment-method-container .save-card-checkbox input:checked ~ .checkmark:after {
  display: block;
}
.payment-method-container .save-card-description {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-neutrals-600);
  margin: 0;
}
@media (max-width: 768px) {
  .payment-method-container .inline-card-form-header {
    padding: 12px 16px;
  }
  .payment-method-container .inline-card-form-content {
    padding: 16px;
  }
  .payment-method-container .form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .payment-method-container .inline-card-form-footer {
    flex-direction: column;
    gap: 8px;
  }
  .payment-method-container .inline-card-form-footer button {
    width: 100%;
  }
  .payment-method-container .dashed-line {
    margin: 12px 0;
  }
}
.save-card-checkbox-text {
  padding-top: 2px;
}
.checkout-page {
  background-color: var(--color-white);
}
.checkout-page--processing {
  position: relative;
}
.checkout-lottie-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00000080;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modalOverlayFadeIn 0.3s ease-out;
}
.checkout-lottie-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.checkout-lottie-loader {
  max-width: 300px;
  max-height: 300px;
  width: 100%;
  height: 100%;
}
@keyframes modalOverlayFadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.checkout-error-message {
  background-color: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.checkout-error-message p {
  color: #dc2626;
  font-size: 14px;
  margin: 0;
}
.checkout-error-message button {
  background: none;
  border: none;
  color: #dc2626;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkout-section-container {
  background-color: var(--color-white);
  border-radius: 20px;
  border: 1px solid var(--color-neutrals-100);
}
.contact-info-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.contact-info-form .input-container .floating-label {
  text-transform: capitalize;
}
.checkout-contact-info-section {
  background: var(--color-white);
  border: 1px solid var(--color-neutrals-100);
  border-radius: 20px;
  padding: 24px;
}
.contact-info-title {
  font-size: 20px;
  line-height: 28px;
  text-transform: capitalize;
  color: var(--color-neutrals-800);
}
.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.checkout-contact-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.confirmation-checkbox-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.confirmation-checkbox-wrapper .checkout-add-gift-card-button {
  font-size: 16px;
  margin-left: auto;
}
.checkout-offer-end-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.checkout-offer-end-wrapper .offer-container {
  align-items: start;
}
.checkout-offer-end-wrapper .offer-container .offer-title {
  line-height: 12px;
}
.checkout-offer-end-wrapper .offer-container .flex-item-center {
  flex-direction: row-reverse;
}
.checkout-offer-end-wrapper .offer-container .flex-item-center svg {
  animation: none;
  transform: rotateX(180deg) rotate(180deg) !important;
}
.checkout-offer-end-wrapper .offer-container .offer-description sup {
  font-size: 8px;
  line-height: 12px;
  vertical-align: text-top;
}
.payment-method-container {
  background: var(--color-yellow-50);
  border-radius: 20px;
  padding: 24px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.payment-method-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.payment-method-header p {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
  text-transform: capitalize;
}
.payment-method-actions-button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.payment-method-actions-button button,
.checkout-login-button {
  font-size: 16px;
  line-height: 24px;
}
.payment-method-actions-button button svg {
  transition: transform 0.2s ease;
}
.payment-method-actions-button button .plus-icon-rotated {
  transform: rotate(45deg);
}
.checkout-card-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.checkout-card-section-title {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  text-transform: capitalize;
}
.checkout-card-item-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.checkout-card-item .custom-checkbox {
  width: 100%;
  align-items: center;
}
.checkout-card-item .custom-checkbox-label {
  width: 100%;
}
.checkout-gift-card .common-card-icon {
  background-color: var(--color-green-50);
  color: var(--color-green-600);
}
.cart-item-qty {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-500);
  font-family: var(--font-myriad-pro-semibold-condensed);
  display: flex;
  align-items: center;
  gap: 4px;
}
.cart-item-qty span {
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.checkout-items {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 8px;
}
.checkout-items.checkout-items-row,
.checkout-modifier-item.checkout-modifier-item-row {
  flex-direction: row;
}
.checkout-modifier-items,
.mobile-checkout-item-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkout-modifier-item-price-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.checkout-modifier-item-price-qty.modifier-item-col {
  flex-direction: column-reverse;
  justify-content: center;
  gap: 0;
}
.checkout-heart-and-price-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.checkout-modifier-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.checkout-back-button {
  width: 48px;
  height: 48px;
  position: absolute;
  left: 0;
  cursor: pointer;
  z-index: 10;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.checkout-section-expand-collapse {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--color-neutrals-100);
}
.checkout-section-expand-collapse-desktop {
  background-color: var(--color-white);
  border-radius: 20px;
  border: 1px solid var(--color-neutrals-100);
  padding: 18px 40px;
}
.checkout-section-expand-collapse-desktop .checkout-section-container {
  border: unset;
  border-radius: unset;
  padding: 16px 8px;
}
.checkout-section-expand-collapse-desktop .expand-collapse-title {
  font-family: var(--font-sink);
  color: var(--color-neutrals-800);
  font-size: 20px;
}
.mobile-checkout-item-section-title {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-800);
}
.checkout-items-list {
  list-style: none;
}
.checkout-items-list-container .checkout-items .cart-item-title {
  font-size: 16px;
  line-height: 18px;
  font-family: var(--font-myriad-pro-black-condensed);
}
.checkout-items-list-container .checkout-items .cart-item-price {
  font-size: 16px;
  line-height: 24px;
  margin-left: auto;
  min-width: auto;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.checkout-items-list-container .checkout-items .cart-item-image {
  max-width: 80px;
}
.checkout-items-list-container .checkout-items .cart-item-description {
  font-size: 14px;
  line-height: 16px;
}
.added-gift-cards-section {
  margin-top: 20px;
}
.added-gift-cards-section .gift-cards-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.gift-card-item {
  background: var(--color-white);
  border: 1px solid var(--color-neutrals-100);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.2s ease;
}
.gift-card-item:hover {
  border-color: var(--color-neutrals-200);
  box-shadow: 0 2px 8px #0000001a;
}
.gift-card-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.gift-card-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gift-card-number {
  font-weight: 600;
  color: var(--color-neutrals-900);
  font-size: 14px;
}
.gift-card-balance {
  color: var(--color-neutrals-600);
  font-size: 13px;
}
.common-card-balance {
  color: var(--color-neutrals-600);
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
}
.gift-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gift-card-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-neutrals-700);
}
.gift-card-checkbox input[type='checkbox'] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-500);
}
.gift-card-remove-btn {
  background: var(--color-error-50);
  color: var(--color-error-600);
  border: 1px solid var(--color-error-200);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gift-card-remove-btn:hover {
  background: var(--color-error-100);
  border-color: var(--color-error-300);
}
.gift-card-error {
  color: #dc3545;
  font-size: 14px;
  margin-top: 8px;
  padding: 8px;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}
.sticky-top {
  position: sticky;
  top: 80px;
  z-index: 9;
}
.checkout-section-title {
  font-size: 20px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .checkout-page .my-bag-content-wrapper,
  .checkout-page .checkout-section-container,
  .checkout-page .bag-section-container {
    padding: 20px;
  }
  .checkout-page .checkout-card-item-container {
    grid-template-columns: 1fr;
  }
  .checkout-page .my-bag-main-section-wrapper {
    gap: 12px;
  }
  .added-gift-cards-section .gift-cards-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .checkout-lottie-loader {
    max-width: 300px;
    max-height: 300px;
  }
  .gift-card-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .gift-card-actions {
    width: 100%;
    justify-content: space-between;
  }
  .gift-card-remove-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
  .checkout-page {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100dvh;
  }
  .checkout-page .summary-section {
    flex-direction: row;
  }
  .checkout-items {
    gap: 0;
  }
  .checkout-items-list-container .checkout-items .cart-item-image {
    max-width: 60px;
  }
  .checkout-page .my-bag-content-wrapper {
    padding: 16px 16px 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    background: var(--color-yellow-100) !important;
  }
  .checkout-page .bag-footer {
    position: relative;
    z-index: 10;
    background-color: var(--color-white);
    flex-shrink: 0;
  }
  .checkout-section-container {
    border: unset;
    border-radius: unset;
    padding: 0;
  }
  .checkout-card-item-container {
    grid-template-columns: 1fr;
  }
  .checkout-section-container .bag-section-header {
    justify-content: center;
    position: relative;
    margin: 0;
    padding: 16px;
    border: unset;
  }
  .checkout-contact-info-section {
    border: unset;
    padding: 16px;
    margin-top: -16px;
    margin-right: -16px;
    margin-left: -16px;
    border-radius: 0;
  }
  .checkout-contact-info-header {
    flex-direction: column;
    align-items: unset;
    gap: 8px;
    margin-bottom: 20px;
  }
  .payment-method-container {
    padding: 16px;
    margin-left: -16px;
    margin-right: -16px;
    border-radius: unset;
    background: var(--color-yellow-100) !important;
    flex-direction: column-reverse;
    margin-top: 0;
  }
  .payment-method-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .payment-method-header.guest {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .checkout-card-item .custom-checkbox {
    flex-direction: row-reverse;
    gap: 8px;
  }
  .payment-method-actions-button,
  .payment-method-actions-button button,
  .checkout-login-button {
    width: 100%;
  }
  .payment-method-header.guest .payment-method-actions-button {
    width: unset;
  }
  .checkout-card-item .custom-checkbox-icon {
    margin-right: 0;
  }
  .mobile-checkout-item-section .cart-item-image img {
    max-width: 24px;
  }
  .added-gift-cards-section .gift-cards-list {
    grid-template-columns: 1fr;
  }
  .checkout-section-expand-collapse .expand-collapse-inner .dashed-line {
    margin: 8px 0;
  }
  .confirmation-checkbox-wrapper .checkbox-description-text,
  .confirmation-checkbox-wrapper .checkbox-description-text a {
    font-size: 12px;
    line-height: 14px;
  }
  .payment-method-header p {
    font-size: 16px;
    line-height: 24px;
  }
  .added-gift-cards-section {
    margin-top: -16px;
    margin-left: -16px;
    margin-right: -16px;
    padding: 16px;
    background: var(--color-yellow-100) !important;
  }
  .checkout-section-title {
    font-size: 16px;
  }
}
@media (max-height: 400px) {
  .checkout-page {
    height: 100%;
  }
}
.catering-page {
  background-color: var(--color-white);
}
.catering-page .mobile-top-banner-container {
  height: calc(100dvh + -0px - env(safe-area-inset-bottom, 0px));
}
.catering-page .footer-app-buttons {
  flex: none;
}
.catering-section-container {
  width: calc(100% - 160px);
  margin: 40px auto;
}
.catering-top-section-container {
  max-width: 1550px;
  margin: 0 auto;
  padding: 60px 80px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.catering-section-header h2 {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-neutrals-800);
}
.catering-section-header p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-600);
  max-width: 640px;
}
.catering-card-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 32px;
}
.catering-card-section .menu-card button {
  width: max-content;
  margin-top: auto;
}
.catering-rewards-container {
  padding: 120px 80px;
  background-image: url(/images/account-bg-CJ3xRhfr.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.catering-rewards-container .catering-section-header h2 {
  position: relative;
}
.catering-rewards-container .catering-section-header h2 span {
  position: absolute;
  top: -65%;
  color: var(--color-red-500);
  transform: rotate(-4deg);
  font-family: var(--font-hollie-script);
  font-size: 40px;
  line-height: 40px;
}
.catering-rewards-content {
  border: 1px solid var(--color-neutrals-200);
  border-radius: 16px;
  padding: 60px 40px;
  margin-top: 32px;
  background-color: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.catering-rewards-content-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 32px;
}
.catering-rewards-content-item-number {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-white);
  font-family: var(--font-sink);
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-red-500);
}
.catering-rewards-content-item h2 {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
  margin-bottom: 12px;
}
.catering-rewards-content-item p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
}
.catering-rewards-content-item p sup {
  font-size: 10px;
  line-height: 10px;
}
.catering-rewards-content-item-arrow {
  color: var(--color-red-500);
}
.catering-rewards-content-item-arrow.down {
  margin-top: 34px;
  transform: rotateX(180deg);
}
.catering-download-app-container {
  padding: 40px;
  max-width: 1280px;
  margin: 0 auto;
}
.catering-download-app-content {
  display: flex;
  background-color: var(--color-yellow-400);
  border-radius: 16px;
  overflow: hidden;
}
.catering-download-app-image {
  flex: 1;
  max-height: 400px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}
.catering-download-app-image .qr-image {
  position: absolute;
  object-fit: contain;
  max-height: 387px;
  margin-top: auto;
}
.catering-download-app-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.catering-download-app-right-content {
  flex: 1;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
}
.catering-download-app-content-text {
  font-size: 64px;
  line-height: 64px;
  position: relative;
  color: var(--color-neutrals-800);
}
.catering-download-app-text {
  font-size: 40px;
  line-height: 40px;
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  transform: rotate(-4deg);
  display: block;
  display: table-cell;
  position: relative;
}
.slim-catering-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.slim-catering-banner-content-image {
  flex: 1;
  background-color: var(--color-neutrals-100);
  border-radius: 16px;
  overflow: hidden;
  max-height: 628px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slim-catering-banner-content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slim-catering-banner-content h1 {
  font-size: 96px;
  line-height: 96px;
  color: var(--color-neutrals-800);
  max-width: 520px;
}
.slim-catering-banner-content h1 span {
  font-size: 64px;
  line-height: 64px;
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  transform: rotate(-4deg);
  display: block;
  display: table-cell;
  position: relative;
  left: -20px;
  top: -8px;
}
.slim-catering-banner-content p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-600);
  max-width: 520px;
}
.slim-catering-banner-content button {
  min-width: 280px;
  gap: 8px;
  width: max-content;
}
.catering-category-section {
  padding: 76px 80px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.catering-category-section-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}
.catering-category-section-header-actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-end;
  flex: 1;
  min-width: 0;
  flex: 50%;
}
.catering-menu-swiper-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.catering-category-section-header-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 50%;
}
.catering-category-section-header-title-wrapper h2 {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-neutrals-800);
  position: relative;
}
.catering-category-section-header-title-wrapper button {
  width: fit-content;
}
.catering-category-section-header-title-wrapper h2 span {
  font-size: 40px;
  line-height: 40px;
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  transform: rotate(-4deg);
  display: table-cell;
  position: relative;
  top: -8px;
  left: -20px;
}
.catering-category-section-header-title-wrapper p {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
  max-width: 640px;
}
.catering-category-card-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}
.catering-page .menu-card-image {
  aspect-ratio: 1;
}
.catering-page .menu-card-image img {
  object-fit: cover;
}
.catering-menu-swiper-wrapper .menu-swiper {
  padding: 16px 25px 42px;
}
.catering-menu-swiper-wrapper .menu-slider-container {
  border-radius: 16px;
}
.catering-menu-swiper-wrapper .menu-slider-card {
  min-width: unset;
  max-width: unset;
}
.catering-menu-swiper-wrapper .menu-slider-card .menu-slider-card-title {
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: clamp(20px, 1.8vw, 32px);
  line-height: clamp(20px, 1.8vw, 32px);
}
.catering-menu-swiper-wrapper .menu-slider-card .menu-slider-card-description {
  line-clamp: 4;
  -webkit-line-clamp: 4;
  font-size: clamp(14px, 1vw, 20px);
  line-height: clamp(14px, 1vw, 20px);
}
@media (max-width: 768px) {
  .catering-section-container {
    width: calc(100% - 32px);
  }
  .catering-top-section-container {
    padding: 16px;
    gap: 16px;
    flex-direction: column;
  }
  .slim-catering-banner-content {
    gap: 16px;
  }
  .slim-catering-banner-content h1 {
    font-size: 32px;
    line-height: 32px;
    margin-left: 16px;
  }
  .slim-catering-banner-content p {
    font-size: 16px;
    line-height: 24px;
  }
  .slim-catering-banner-content h1 span {
    font-size: 32px;
    line-height: 32px;
    top: 0;
    left: -16px;
  }
  .slim-catering-banner-content button {
    width: 100%;
    font-size: 16px;
    height: 48px;
  }
  .slim-catering-banner-content-image {
    min-height: 300px;
  }
  .catering-section-header h2 {
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 12px;
  }
  .catering-card-section .menu-card button {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
  }
  .catering-rewards-container {
    padding: 40px 16px;
    background-image: unset;
  }
  .catering-rewards-container .catering-section-header h2 span {
    top: -90%;
    font-size: 32px;
    line-height: 32px;
  }
  .catering-rewards-content {
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
    margin-top: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
  .catering-rewards-content-item-number {
    font-size: 28px;
    line-height: 28px;
    width: 76px;
    height: 76px;
  }
  .catering-rewards-content-item h2 {
    font-size: 28px;
    line-height: 28px;
  }
  .catering-rewards-content-item-arrow {
    transform: rotate(90deg);
    margin-left: auto;
    margin-right: -22px;
  }
  .catering-rewards-content-item-arrow.down {
    transform: rotate(90deg) rotateX(180deg);
    margin-top: 0;
    margin-right: auto;
    margin-left: -22px;
  }
  .catering-download-app-container {
    padding: 0;
  }
  .catering-download-app-content {
    border-radius: unset;
  }
  .catering-download-app-image {
    display: none;
  }
  .catering-download-app-content-text {
    font-size: 40px;
    line-height: 40px;
  }
  .catering-download-app-text {
    font-size: 32px;
    line-height: 32px;
    left: -40px;
  }
  .catering-download-app-right-content {
    padding-bottom: 64px;
  }
  .catering-category-section {
    padding: 20px 16px;
  }
  .catering-category-section-header {
    flex-direction: column;
    gap: 24px;
  }
  .catering-category-section-header-actions {
    width: 100%;
    align-items: stretch;
  }
  .catering-menu-swiper-wrapper {
    width: 100%;
  }
  .catering-category-section-header-title-wrapper {
    gap: 12px;
  }
  .catering-category-section-header-title-wrapper h2 {
    font-size: 32px;
    line-height: 32px;
    margin-left: 16px;
  }
  .catering-category-section-header-title-wrapper h2 span {
    font-size: 32px;
    line-height: 32px;
    white-space: nowrap;
    top: -2px;
    left: -16px;
  }
  .catering-category-section-header-title-wrapper p {
    font-size: 16px;
    line-height: 24px;
  }
  .catering-category-card-wrapper {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .catering-category-card-wrapper
    .product-card-right-content
    .mobile-product-content {
    margin-right: 0;
  }
  .catering-menu-swiper-wrapper .menu-swiper {
    padding: 14px 14px 28px;
  }
}
.about-page {
  background-color: var(--color-white);
}
.about-page .mobile-top-banner-container {
  height: calc(100dvh + -0px - env(safe-area-inset-bottom, 0px));
}
.about-top-section-container {
  max-width: 1550px;
  margin: 0 auto;
  padding: 60px 80px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.slim-about-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.slim-about-banner-content-image {
  flex: 1;
  background-color: var(--color-neutrals-100);
  border-radius: 8px;
  overflow: hidden;
  max-height: 628px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slim-about-banner-content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slim-about-banner-content h1 {
  font-size: 96px;
  line-height: 96px;
  color: var(--color-neutrals-800);
  max-width: 580px;
}
.slim-about-banner-content h1 span {
  font-size: 64px;
  line-height: 64px;
  font-family: var(--font-hollie-script);
  color: var(--color-red-500);
  transform: rotate(-4deg);
  display: block;
  display: table-cell;
  position: relative;
  left: -20px;
  top: -8px;
}
.slim-about-banner-content-description {
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.slim-about-banner-content-description p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-600);
}
.about-right-content-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 360px;
}
.about-right-content-buttons .flex-item-center {
  display: flex;
  gap: 16px;
}
.about-right-content-buttons button {
  width: 100%;
  gap: 8px;
}
.about-video-section-container {
  padding: 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.about-video-section-container h2 {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-neutrals-800);
  text-align: center;
}
.video-wrapper {
  position: relative;
  width: 60%;
  height: 0;
  padding-bottom: 34.5%;
  overflow: hidden;
  border-radius: 12px;
  margin: 0 auto;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.about-logo-title-section {
  padding: 40px 80px;
  background-image: url(/images/account-bg-CJ3xRhfr.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.about-logo-title-content {
  background-color: var(--color-white);
  padding: 60px 40px;
  border-radius: 16px;
  border: 1px solid var(--color-neutrals-100);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  max-height: 184px;
  overflow: hidden;
}
.about-logo-title-content p {
  font-size: 64px;
  line-height: 64px;
  color: var(--color-red-500);
  font-family: var(--font-hollie-script);
}
.about-logo-title-content .character-logo-icon {
  width: 150px;
  height: 230px;
  margin-top: 85px;
  color: var(--color-neutrals-500);
}
.about-character-logo-left {
  transform: rotate(4deg);
}
.about-character-logo-right {
  transform: rotate(-4deg);
}
@media (max-width: 1100px) {
  .video-wrapper {
    width: 100%;
    padding-bottom: 56.25%;
  }
}
@media (max-width: 768px) {
  .about-top-section-container {
    padding: 16px;
    gap: 16px;
    flex-direction: column;
  }
  .slim-about-banner-content {
    gap: 16px;
  }
  .slim-about-banner-content h1 {
    font-size: 32px;
    line-height: 32px;
    margin-left: 16px;
  }
  .slim-about-banner-content p {
    font-size: 16px;
    line-height: 24px;
  }
  .slim-about-banner-content h1 span {
    font-size: 32px;
    line-height: 32px;
    top: 0;
    left: -16px;
  }
  .about-right-content-buttons {
    max-width: 100%;
  }
  .about-right-content-buttons .flex-item-center {
    flex-direction: column;
  }
  .about-video-section-container {
    padding: 24px 16px 40px;
  }
  .about-video-section-container h2 {
    font-size: 40px;
    line-height: 40px;
  }
  .about-logo-title-section {
    padding: 40px 16px;
  }
  .about-logo-title-content {
    padding: 0;
    border: none;
    background: transparent;
  }
  .about-logo-title-content p {
    font-size: 32px;
    line-height: 32px;
  }
}
.confirmation-page {
  background-color: var(--color-white);
}
.confirmation-page .notification-banner {
  width: 100%;
  margin-right: -40px;
}
.confirmation-page .notification-banner-center-content {
  width: 100%;
}
.confirmation-page .notification-banner-center-content h4 {
  letter-spacing: 0.2px;
  font-size: 24px;
  line-height: 24px;
}
.confirmation-page .notification-banner-center-content h4.double-point-text {
  font-family: var(--font-hollie-script);
}
.gift-card-form-title h4 {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-neutrals-800);
}
.gift-card-form-title p {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.inline-gift-card-form-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  margin-top: 20px;
}
.inline-gift-card-form {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.confirmation-page .notification-banner-center-content svg {
  flex-shrink: 0;
}
.confirmation-banner-signup-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.confirmation-banner-signup-content button {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-800);
  border-radius: 100px;
  border: 1px solid var(--color-neutrals-800);
  background-color: var(--color-white);
  font-family: var(--font-myriad-pro-black-condensed);
  padding: 6px 40px;
}
p.confirmation-banner-description {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.confirmation-main-section-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.confirmation-section-container {
  background-color: var(--color-white);
  border-radius: 20px;
  border: 1px solid var(--color-neutrals-100);
}
.confirmation-section-container .bag-summary-container {
  gap: 4px;
}
.payment-method-confirmation-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.confirmation-summary-section-title {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-800);
}
.payment-method-confirmation-section .common-card-title {
  font-size: 16px;
  line-height: 24px;
}
.payment-method-confirmation-section .common-card-description {
  font-size: 14px;
  line-height: 20px;
}
.confirm-button-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.confirm-button-section button {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  gap: 8px;
}
.confirmation-section-left-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}
.confirmation-section-left-side .confirmation-dashed-line {
  margin: 0;
}
.confirmation-content-header {
  display: flex;
  gap: 20px;
}
.confirmation-content-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.confirmation-content-header .notification-banner-content {
  height: unset;
  justify-content: flex-start;
  padding: 18px 40px 18px 20px;
  clip-path: polygon(
    100% 0,
    0 0,
    6px 5.56%,
    0 11.11%,
    6px 16.67%,
    0 22.22%,
    6px 27.78%,
    0 33.33%,
    6px 38.89%,
    0 44.44%,
    6px 50%,
    0 55.56%,
    6px 61.11%,
    0 66.67%,
    6px 72.22%,
    0 77.78%,
    6px 83.33%,
    0 88.89%,
    6px 94.44%,
    0 100%,
    100% 100%
  );
}
.confirmation-content-header-title {
  font-size: 32px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.confirmation-content-header-title span {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-red-600);
  font-family: var(--font-hollie-script);
}
.confirmation-content-header-description {
  display: flex;
  gap: 8px;
  color: var(--color-neutrals-600);
  max-width: 556px;
}
.confirmation-content-header-description svg {
  margin-top: 2px;
  flex-shrink: 0;
}
.confirmation-content-header-description p {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.confirmation-order-number {
  font-size: 28px;
  line-height: 36px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.cancel-order-btn {
  gap: 8px;
  font-size: 16px;
  line-height: 24px;
}
.order-number-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.order-number-copy-btn-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.order-number-copy-btn-wrapper .copy-address-button {
  width: 40px;
  height: 40px;
  color: var(--color-neutrals-800);
}
.order-number-copy-btn-wrapper .option-button-dropdown {
  right: 0;
}
.order-number-copy-btn-wrapper .product-heart-btn {
  width: 48px;
  height: 48px;
}
.confirmation-page .checkout-items .cart-item-image {
  width: 68px;
  height: 68px;
}
.order-time-details-container {
  max-height: 245px;
  background-image: url(/assets/reward-bg-2-BYtQKQKD.webp);
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 20px;
  border: 1px solid var(--color-neutrals-100);
  padding: 40px;
  display: flex;
  gap: 40px;
  overflow: hidden;
}
.order-time-details-left {
  width: 50%;
}
.order-time-details-left .dashed-line {
  margin: 24px 0;
  border-color: var(--color-neutrals-600);
}
.confirmation-order-detail-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-red-600);
}
.confirmation-order-detail-title {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-red-600);
}
.confirmation-order-detail-description {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.order-time-details-right {
  width: 50%;
}
.order-time-details-right svg {
  width: 245px;
  height: 342px;
  color: var(--color-neutrals-500);
  margin-top: -22px;
}
@media (min-width: 769px) and (max-width: 1065px) {
  .confirmation-page .my-bag-content-wrapper {
    padding: 20px;
  }
  .confirmation-content-header {
    flex-direction: column-reverse;
  }
  .confirmation-section-left-side {
    padding: 20px;
  }
  .confirmation-page .notification-banner {
    margin-right: -20px;
    max-width: 450px;
  }
  .confirmation-content-header .notification-banner-content {
    padding: 10px 20px;
  }
  .confirmation-page .summary-section .p-40 {
    padding: 20px;
  }
  .order-time-details-container {
    max-height: 200px;
    padding: 20px;
    gap: 20px;
  }
  .order-time-details-right svg {
    width: 120px;
    height: 185px;
    margin-top: -5px;
    transform: rotate(-7deg);
  }
  .order-time-details-left {
    flex: 1;
  }
  .order-time-details-right {
    width: 80px;
  }
}
@media (max-width: 768px) {
  .confirmation-page {
    display: flex;
    flex-direction: column;
  }
  .my-bag-content-wrapper {
    flex: 1;
  }
  .confirmation-page .checkout-items {
    flex-direction: row;
  }
  .confirmation-page .my-bag-content-wrapper {
    padding: 0 20px 20px;
  }
  .confirmation-page .notification-banner {
    margin-bottom: 20px;
    margin-right: 0;
  }
  .confirmation-content-header .notification-banner-content {
    height: 40px;
    padding: 0 28px;
    clip-path: polygon(
      6px 0,
      100% 0,
      calc(100% - 6px) 12.5%,
      100% 25%,
      calc(100% - 6px) 37.5%,
      100% 50%,
      calc(100% - 6px) 62.5%,
      100% 75%,
      calc(100% - 6px) 87.5%,
      100% 100%,
      0 100%,
      6px 87.5%,
      0 75%,
      6px 62.5%,
      0 50%,
      6px 37.5%,
      0 25%,
      6px 12.5%,
      0 0
    );
    justify-content: center;
  }
  .confirmation-page .notification-banner-center-content h4 {
    font-size: 16px;
    line-height: 16px;
  }
  p.confirmation-banner-description {
    font-size: 12px;
    line-height: 16px;
  }
  .confirmation-page .notification-banner-content {
    height: unset;
    padding: 16px;
  }
  .confirmation-main-section-wrapper {
    flex-direction: column;
    gap: 16px;
  }
  .confirmation-section-container {
    border: unset;
    border-radius: unset;
    padding: 0;
  }
  .my-bag-content-wrapper .notification-banner-content {
    justify-content: unset;
  }
  .confirmation-section-left-side {
    gap: 16px;
  }
  .confirmation-section-left-side .checkout-section-container,
  .confirmation-main-section-wrapper .summary-section .bag-section-container,
  .confirmation-main-section-wrapper
    .summary-section
    .payment-method-confirmation-section {
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--color-neutrals-100);
  }
  .order-time-details-container {
    background: var(--color-yellow-100);
    max-height: 197px;
    padding: 20px 16px;
    gap: 16px;
  }
  .order-time-details-left {
    flex: 1;
  }
  .order-time-details-right {
    width: 80px;
  }
  .order-time-details-right svg {
    width: 120px;
    height: 185px;
    margin-top: -5px;
    transform: rotate(-7deg);
  }
  .confirmation-order-detail-title {
    font-size: 16px;
    line-height: 24px;
  }
  .confirmation-order-number {
    font-size: 20px;
    line-height: 28px;
  }
  .confirmation-content-header-title {
    font-size: 24px;
    line-height: 24px;
  }
  .confirmation-content-header-title span {
    font-size: 32px;
    line-height: 32px;
  }
  .confirmation-content-header-description p {
    font-size: 14px;
    line-height: 20px;
  }
  .confirm-button-section {
    padding: 16px;
    flex-direction: row;
    box-shadow: 0 0 20px 4px #d8d8d852;
    border-top: 1px solid var(--color-neutrals-100);
  }
}
.nutritional-and-allergen-content {
  padding: 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.nutritional-and-allergen-content-header {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.nutritional-and-allergen-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.nutritional-and-allergen-title-wrapper h1 {
  font-size: 64px;
  line-height: 64px;
  text-align: center;
  color: var(--color-neutrals-800);
}
.nutritional-and-allergen-title-wrapper p {
  font-size: 24px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.nutritional-and-allergen-image-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.nutritional-and-allergen-image {
  flex: 1;
  background-color: var(--color-neutrals-100);
  border-radius: 8px;
  overflow: hidden;
  max-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nutritional-and-allergen-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nutritional-and-allergen-image-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nutritional-and-allergen-image-content p {
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-size: 20px;
  line-height: 28px;
  color: var(--color-neutrals-600);
}
.nutritional-and-allergen-image-content a {
  font-size: 18px;
  line-height: 24px;
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
}
.nutritional-and-allergen-image-content a:hover {
  color: var(--color-red-500);
}
.nutritional-and-allergen-data-container,
.nutritional-and-allergen-data {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.nutritional-and-allergen-data-container {
  gap: 32px;
}
.nutritional-and-allergen-data h2 {
  font-size: 40px;
  line-height: 40px;
  color: var(--color-neutrals-800);
}
.nutritional-and-allergen-data-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-neutrals-200);
  margin-bottom: 20px;
}
.nutritional-and-allergen-data-content h3 {
  font-size: 22px;
  line-height: 22px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-black-condensed);
}
.nutritional-and-allergen-data-content-text,
.allergens-text {
  font-size: 18px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.allergens-text {
  font-family: var(--font-myriad-pro-black-condensed);
}
.allergens-text span {
  font-family: var(--font-myriad-pro-semibold-condensed);
}
@media (min-width: 769px) and (max-width: 1024px) {
  .nutritional-and-allergen-content {
    padding: 40px;
  }
  .nutritional-and-allergen-image-wrapper {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
  .nutritional-and-allergen-content {
    padding: 24px 16px;
    gap: 32px;
  }
  .nutritional-and-allergen-title-wrapper h1 {
    font-size: 40px;
    line-height: 40px;
  }
  .nutritional-and-allergen-title-wrapper p {
    font-size: 20px;
    line-height: 20px;
  }
  .nutritional-and-allergen-content-header {
    gap: 32px;
  }
  .nutritional-and-allergen-image-wrapper {
    flex-direction: column;
  }
  .nutritional-and-allergen-image-content p {
    font-size: 18px;
    line-height: 24px;
  }
  .nutritional-and-allergen-data-container {
    gap: 20px;
  }
  .nutritional-and-allergen-data h2 {
    font-size: 30px;
    line-height: 30px;
  }
  .nutritional-and-allergen-data-content h3 {
    font-size: 20px;
    line-height: 20px;
  }
  .nutritional-and-allergen-data-content-text,
  .allergens-text {
    font-size: 16px;
  }
  .nutritional-and-allergen-data-content {
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
}
.terms-and-conditions-content {
  padding: 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.terms-and-conditions-content h1 {
  font-size: 64px;
  line-height: 64px;
  text-align: center;
  color: var(--color-neutrals-800);
}
.conditions-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.terms-and-conditions-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.terms-and-conditions-details-title {
  font-size: 20px;
  line-height: 24px;
  color: var(--color-neutrals-800);
}
.terms-and-conditions-details-text {
  font-size: 18px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
@media (max-width: 768px) {
  .terms-and-conditions-content {
    padding: 24px 16px;
  }
  .terms-and-conditions-content h1 {
    font-size: 40px;
    line-height: 40px;
  }
  .terms-and-conditions-details-title {
    font-size: 18px;
  }
  .terms-and-conditions-details-text {
    font-size: 16px;
  }
}
.privacy-policy-content {
  padding: 40px 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.privacy-policy-content h1 {
  font-size: 64px;
  line-height: 64px;
  text-align: center;
  color: var(--color-neutrals-800);
}
.policy-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.privacy-policy-details-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.privacy-policy-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.privacy-policy-details-title {
  font-size: 20px;
  line-height: 24px;
  color: var(--color-neutrals-800);
}
.privacy-policy-details-text {
  font-size: 18px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.privacy-policy-details-text a {
  color: var(--color-neutrals-800);
  font-family: var(--font-myriad-pro-black-condensed);
}
.privacy-policy-details-text a:hover {
  color: var(--color-red-500);
}
.privacy-policy-details-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 20px;
}
.privacy-policy-subsection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  margin-left: 16px;
}
.privacy-policy-subsection-title {
  font-size: 18px;
  line-height: 22px;
  color: var(--color-neutrals-800);
  font-weight: 600;
}
@media (max-width: 768px) {
  .privacy-policy-content {
    padding: 24px 16px;
  }
  .privacy-policy-content h1 {
    font-size: 40px;
    line-height: 40px;
  }
  .privacy-policy-details-title {
    font-size: 18px;
  }
  .privacy-policy-details-text {
    font-size: 16px;
  }
  .privacy-policy-subsection {
    margin-top: 10px;
    margin-left: 8px;
  }
  .privacy-policy-subsection-title {
    font-size: 16px;
    line-height: 20px;
  }
  .privacy-policy-details-sections {
    margin-top: 10px;
    gap: 24px;
  }
}
.faqs-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.faqs-subtitle {
  font-size: 32px;
  line-height: 32px;
  text-align: center;
  color: var(--color-neutrals-800);
}
.faqs-description {
  font-size: 20px;
  line-height: 24px;
  text-align: center;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.faqs-que-ans-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 40px;
}
.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.faq-accordion-item {
  border: 1px solid var(--color-neutrals-200);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-white);
}
.faq-question {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--color-neutrals-100);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  outline: none;
  width: 100%;
  color: var(--color-neutrals-600);
  text-align: left;
}
.faq-question:hover {
  background: var(--color-neutrals-200);
}
.faq-question.active {
  background: var(--color-red-500);
  color: var(--color-white);
}
.faq-question-text {
  font-size: 18px;
  line-height: 22px;
  color: inherit;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.faq-icon {
  font-size: 18px;
  line-height: 20px;
  transition: transform 0.3s ease;
}
.faq-icon.open {
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer.open {
  max-height: 1000px;
}
.faq-answer-content {
  padding: 24px;
  background: var(--color-white);
}
.faq-answer-text {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  margin-bottom: 16px;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.faq-answer-text:last-child {
  margin-bottom: 0;
}
.faq-question-text sup,
.faq-answer-text sup {
  font-size: 12px;
  line-height: 12px;
}
@media (max-width: 768px) {
  .faqs-subtitle {
    font-size: 24px;
    line-height: 24px;
  }
  .faqs-description {
    font-size: 18px;
    line-height: 24px;
  }
  .faqs-que-ans-section {
    margin-top: 24px;
    gap: 12px;
  }
  .faq-question {
    padding: 16px 20px;
  }
  .faq-icon {
    font-size: 20px;
  }
  .faq-answer-content {
    padding: 20px;
  }
  .faq-answer-text {
    margin-bottom: 12px;
  }
}
.accessibility-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.accessibility-content p {
  font-size: 20px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.accessibility-content p span a {
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-black-condensed);
  transition: color 0.3s ease;
}
.accessibility-content p span a:hover {
  color: var(--color-red-500);
}
@media (max-width: 768px) {
  .accessibility-content p {
    font-size: 18px;
  }
}
.acknowledgements-content,
.acknowledgements-sections-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.acknowledgements-description {
  font-size: 18px;
  line-height: 24px;
  color: var(--color-neutrals-600);
}
.acknowledgements-section,
.acknowledgements-subsection,
.acknowledgements-subsection-description {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.acknowledgements-section h2 {
  font-size: 28px;
  line-height: 32px;
  color: var(--color-neutrals-800);
}
.acknowledgements-section ul {
  margin-left: 60px;
}
.acknowledgements-section ul li {
  font-size: 18px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.acknowledgements-section ul li a {
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.acknowledgements-section ul li a:hover {
  color: var(--color-red-500);
}
.acknowledgements-subsection {
  margin-top: 20px;
}
.acknowledgements-subsection-description p {
  font-size: 18px;
  line-height: 24px;
  color: var(--color-neutrals-600);
  font-family: var(--font-myriad-pro-semibold-condensed);
}
@media (max-width: 768px) {
  .acknowledgements-description {
    font-size: 16px;
  }
  .acknowledgements-section h2 {
    font-size: 20px;
    line-height: 24px;
  }
  .acknowledgements-section ul {
    margin-left: 40px;
  }
  .acknowledgements-subsection-description p {
    font-size: 16px;
  }
}
.group-order-join {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-neutrals-50);
  padding: 20px;
}
.group-order-join .group-order-join-content {
  text-align: center;
  max-width: 500px;
  width: 100%;
}
.group-order-join .group-order-join-content h1 {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-neutrals-900);
  margin: 0 0 16px;
  font-family: var(--font-sink);
}
.group-order-join .group-order-join-content p {
  font-size: 16px;
  color: var(--color-neutrals-600);
  margin: 0;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.group-order-join .group-order-join-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--color-neutrals-50);
}
.group-order-join .loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-neutrals-200);
  border-top: 4px solid var(--color-red-500);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.group-order-join .group-order-join-loading p {
  font-size: 16px;
  color: var(--color-neutrals-600);
  margin: 0;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.group-order-join .name-input-modal {
  max-width: 400px;
  width: 100%;
}
.group-order-join .name-input-modal-content {
  padding: 32px;
  text-align: center;
}
.group-order-join .name-input-modal-content h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-neutrals-900);
  margin: 0 0 12px;
  font-family: var(--font-sink);
}
.group-order-join .name-input-modal-content p {
  font-size: 16px;
  color: var(--color-neutrals-600);
  margin: 0 0 24px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  line-height: 1.5;
}
.group-order-join .name-input {
  width: 100%;
  margin-bottom: 24px;
}
.group-order-join .name-input-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.group-order-join .name-input-actions .cancel-btn,
.group-order-join .name-input-actions .join-btn {
  min-width: 120px;
  font-family: var(--font-myriad-pro-semibold-condensed);
  font-weight: 600;
}
@media (max-width: 768px) {
  .group-order-join {
    padding: 16px;
  }
  .group-order-join .group-order-join-content h1 {
    font-size: 24px;
  }
  .group-order-join .group-order-join-content p {
    font-size: 14px;
  }
  .group-order-join .name-input-modal-content {
    padding: 24px;
  }
  .group-order-join .name-input-modal-content h2 {
    font-size: 20px;
  }
  .group-order-join .name-input-modal-content p {
    font-size: 14px;
  }
  .group-order-join .name-input-actions {
    flex-direction: column;
    gap: 8px;
  }
  .group-order-join .name-input-actions .cancel-btn,
  .group-order-join .name-input-actions .join-btn {
    width: 100%;
    min-width: unset;
  }
}
.group-order-login-modal {
  max-width: 400px;
  width: 100%;
}
.group-order-login-modal-content {
  padding: 32px;
  text-align: center;
}
.group-order-login-title {
  font-size: 40px;
  line-height: 42px;
  font-weight: 700;
  color: var(--color-neutrals-900);
  margin: 0 0 16px;
  font-family: var(--font-sink);
  text-align: left;
}
.group-order-login-description {
  font-size: 16px;
  line-height: 20px;
  color: var(--color-neutrals-500);
  margin: 0 0 24px;
  text-align: left;
  font-family: var(--font-myriad-pro-semibold-condensed);
}
.group-order-login-btn {
  width: 100%;
}
@media (max-width: 768px) {
  .group-order-login-modal {
    margin: 16px;
    max-width: calc(100vw - 32px);
  }
  .group-order-login-title {
    font-size: 20px;
  }
  .group-order-login-description {
    font-size: 14px;
  }
}