.product-page {
  width: 402px;
  max-width: 100%;
  min-height: 100dvh;
  margin-inline: auto;
  background: #fff;
}
.product-detail {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 402px;
  max-width: 100%;
  min-height: 917px;
  margin-inline: auto;
  padding-top: calc(15px + var(--gusto-safe-top));
  padding-bottom: 7.5px;
  border: 0;
  background: transparent;
}
.product-detail::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: .25px; background: var(--gusto-line); }
.product-header { display: flex; align-items: center; width: 100%; }
.product-back {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 55px;
  width: 55px;
  height: 54px;
  padding: 15px 20px;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
}
.product-back:focus-visible,
.product-suggestions:focus-visible { outline: 2px solid var(--gusto-best); outline-offset: -2px; }
.product-back svg { display: block; flex: none; }
.product-header__spacer { flex: 0 0 55px; height: 54px; }
.product-summary {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: 10px;
  padding: 15px 10px;
  text-align: center;
}
.product-title { margin: 0; font: 600 16px/19px var(--gusto-font); overflow-wrap: anywhere; }
.product-title:focus { outline: none; }
.product-price { min-height: 19px; margin: 0; font: 400 16px/19px var(--gusto-font); color: var(--gusto-muted); }
.product-media { position: relative; overflow: hidden; isolation: isolate; width: 100%; height: 227px; flex: none; background: #ededed; }
.product-media__badge { position: absolute; z-index: 2; right: 14px; top: 15px; }
.product-media__badge .gusto-badge { border-width: 1px; }
.product-details {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 25px 15px;
  gap: 20px;
}
.product-description { width: 100%; min-height: 36px; margin: 0; color: rgb(0 0 0 / 40%); font: 400 15px/18px var(--gusto-font); overflow-wrap: anywhere; }
.product-toppings { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.product-toppings .gusto-topping { box-sizing: border-box; }
.product-allergens-trigger { flex: none; min-height: 55px; }
.product-suggestions {
  box-sizing: border-box;
  display: flex;
  flex: none;
  align-items: flex-end;
  width: 100%;
  padding: 50px 15px 20px;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.product-suggestions::-webkit-scrollbar { display: none; }
.product-suggestions .gusto-product { flex: 0 0 201.5px; max-width: none; }
.product-suggestions .gusto-product:first-child { flex-basis: 201px; }
.product-suggestions .gusto-product__media { background: #ededed; }
.product-suggestions .gusto-product__title { line-height: 17px; }
.product-suggestions .gusto-product__price { line-height: 19px; }
.product-price-placeholder { display: block; width: 100%; height: 19px; }
.product-allergens {
  box-sizing: border-box;
  width: 360px;
  max-height: calc(100dvh - max(16px, var(--gusto-safe-top)) - max(16px, var(--gusto-safe-bottom)));
  overflow-y: auto;
  max-width: calc(100% - 32px);
  padding: 24px;
  border: 1px solid var(--gusto-line);
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-family: var(--gusto-font);
}
.product-allergens::backdrop { background: rgb(0 0 0 / 35%); }
.product-allergens__content { display: flex; flex-direction: column; gap: 20px; }
.product-allergens h2 { margin: 0; font-size: 20px; font-weight: 500; line-height: 26px; }
.product-allergens p { margin: 0; font-size: 15px; line-height: 22px; }
.product-allergens .gusto-button { width: 100%; }
.product-page--missing { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; min-height: 100dvh; gap: 30px; padding: 85px 20px 40px; }
@media (max-width: 359px) { .product-toppings { gap: 8px; } }

.product-header, .product-media, .product-details,
.product-allergens-trigger, .product-page--missing { touch-action: pan-y pinch-zoom; }

.product-allergens__group { display: flex; flex-direction: column; gap: 8px; }
.product-allergens__group h3 { margin: 0; font-size: 15px; font-weight: 500; line-height: 22px; }
.product-allergens__list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 22px; }
.product-allergens__list li + li { margin-top: 6px; }
.product-allergens .product-allergens__demo { color: #666; font-size: 13px; line-height: 18px; }

.product-media__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(16px);
  transform: scale(1.15);
  pointer-events: none;
}
.product-media__image { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; }

.product-media__badge, .product-summary__badges { display: flex; gap: 4px; }
.product-option-group { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.product-option-group__title { margin: 0; font-size: 15px; line-height: 18px; font-weight: 500; }
.product-page[data-mode='published'] .product-description { white-space: pre-line; }