/* Bottom-anchored gradient + blur band holding a hero's overlaid title. Shared by the
   category landing hero (in normal flow) and the menu page hero (fixed behind the page),
   so it only positions itself against the nearest positioned ancestor and never sets the
   frame's own size. */

.r6pA9,
.rw32z {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  padding: 4rem 2.4rem 1.6rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(31, 44, 50, 0) 4.31%, rgba(31, 44, 50, 0.6) 99.51%);
}

@media (width >= 992px) {
  .r6pA9,
  .rw32z {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 12rem 4rem;
    text-align: left;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 4.31%, rgba(0, 0, 0, 0.4) 99.51%);
  }
}

/* Opt out of the darkening gradient. Declared after both gradient rules above so it wins on
   source order — every selector here is specificity 0-1-0. */
.kg9R7 {
  background: none;
}

.rw32z {
  backdrop-filter: blur(6px);
  mask: linear-gradient(transparent, black, black);
  /* Extends the blur up to where the text starts on desktop, per Figma. */
  min-height: 144px;
}

.V9ln9 {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

@media (width >= 992px) {
  .V9ln9 {
    width: 50.4rem;
    max-width: 100%;
  }
}

.lDcpX {
  margin: 0;
  color: var(--themeColorWhite);
  font-family: 'Anton', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 44px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (width >= 992px) {
  .lDcpX {
    font-size: 48px;
    line-height: 52px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  }

  .bvoa4 {
    font-size: 56px;
    line-height: 60px;
  }
}

.GVSsa {
  margin: 0;
  color: var(--themeColorWhite);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (width >= 992px) {
  .GVSsa {
    font-size: 16px;
    line-height: 24px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  }
}

/* The menu page's hero sits above a left-aligned header, so its band starts left from tablet
   up. The landing page keeps the centred treatment until desktop. */
@media (width >= 768px) {
  .gF-EF {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 8rem 4rem;
    text-align: left;
  }
}

@media (width >= 992px) {
  .gF-EF {
    padding: 0 12rem 4rem;
  }
}

.OxtZk {
  display: grid;
  grid-template-columns: 100%;
  column-gap: 32px;
  row-gap: 32px;
  margin-bottom: 32px;
}

@media (width >= 992px) {
  .OxtZk {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.CXGl- {
  position: relative;
  margin: 0 auto;
  max-width: 708px;
  padding: 0 1.6rem 6.4rem;
}

@media (width >= 992px) {
  .CXGl- {
    max-width: 160rem;
  }
}

.-kdkP {
  font-weight: var(--themeFontWeightBold);
  font-size: var(--themeFontSizeH3);
  color: var(--themeColorForegroundPrimary);
  margin: 0 0 1.4rem;
}

.xJH9s {
  padding: 0 2.4rem;
  margin-top: 2.4rem;
}

/* CategoryCard */
._6YsYh {
  cursor: pointer;
  text-decoration: none;
}

/* ContentWrapper */
.QIOm0 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 86px;
}

@media (width >= 768px) {
  .QIOm0 {
    width: 112px;
  }
}

@media (width >= 992px) {
  .QIOm0 {
    width: 112px;
    gap: 16px;
  }
}

/* CircleCategoryImage — dynamic height via CSS variables set inline */
.hdsUy {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  background-color: var(--themeColorForegroundTint);
  height: var(--mobile-image-height);
}

.bJZUS {
  border: 4px solid var(--themeColorBluePrimary);
}

@media (width >= 768px) {
  .hdsUy {
    height: var(--desktop-image-height);
  }
}

@media (width >= 992px) {
  .hdsUy {
    height: var(--desktop-image-height);
  }
}

.hdsUy img {
  aspect-ratio: 1 / 1;
  box-shadow: 0px 2px 8px 0px rgba(23, 27, 31, 0.16);
  border-radius: 50%;
  background-color: var(--themeColorForegroundTint);
}

/* CategoryTitle */
.mq91\+ {
  width: 100%;
  margin: 0;
  font-size: var(--themeFontSizeH6);
  font-weight: var(--themeFontWeightNormal);
  color: var(--themeColorForegroundPrimary);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._0uC9x {
  color: var(--themeColorBluePrimary);
}

@media (width >= 768px) {
  .mq91\+ {
    font-size: var(--themeFontSizeBody);
  }
}

/* CategoryLink */
.YWhF\+ {
  text-decoration: none;
}

/* BubbleImage — used by HorizontalLinkBubbles */
.N3Wac {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 80px;
  height: 80px;
}

@media (width >= 768px) {
  .N3Wac {
    width: 104px;
    height: 104px;
  }
}

/* PageLoader */
._9awcu {
  background: var(--themeColorBackgroundPrimary);
  margin-top: calc(var(--mobile-header-height) + 62px + 130px);
  height: calc(100vh - calc(var(--mobile-header-height) + 62px + 130px));
}

@media (width >= 768px) {
  ._9awcu {
    margin-top: calc(var(--mobile-header-height) + 62px + 152px);
    height: calc(100vh - calc(var(--mobile-header-height) + 62px + 152px));
  }
}

@media (width >= 992px) {
  ._9awcu {
    margin-top: calc(var(--desktop-header-height) + 70px + 216px);
    height: calc(100vh - calc(var(--desktop-header-height) + 70px + 216px));
  }
}

/* Headline */
.XHAPH {
  padding: 1.6rem;
  color: var(--themeColorForegroundPrimary);
  font-size: var(--themeFontSizeH4);
  font-weight: var(--themeFontWeightBold);
  line-height: 28px;
}

@media (width >= 992px) {
  .XHAPH {
    padding: 1.6rem 6.4rem;
  }
}

/* CardGrid */
.dkKCs {
  padding: 0 1.6rem;
  display: grid;
  grid-template-columns: 100%;
  column-gap: 32px;
  row-gap: 32px;
}

@media (width >= 992px) {
  .dkKCs {
    padding: 0px 6.4rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ImageContainer */
.Cedr7 {
  height: auto;
  position: relative;
  border-radius: 1.6rem;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 1px 4px var(--themeColorShadow);
}

.Cedr7.oAXd2 {
  -webkit-opacity: 0.5;
}

.Cedr7.shdps {
  width: 220px;
  margin-bottom: 0.4rem;
}

/* CardLink */
.pEhvt {
  text-decoration: none;
  cursor: pointer;
}

/* GridSectionWrapper */
.TvaXx {
  display: grid;
  margin-bottom: 3.2rem;
  padding: 0px 2.4rem;
  gap: 16px;
}

@media (width >= 768px) {
  .TvaXx {
    padding: 0 4.8rem;
  }
}

@media (width >= 992px) {
  .TvaXx {
    padding: 0 8rem;
  }
}

@media (width > 1440px) {
  .TvaXx {
    padding: 0 12rem;
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

.TvaXx .XHAPH {
  padding: 0;
}

.TvaXx .dkKCs {
  padding: 0px;
}

@media (width >= 768px) {
  .TvaXx .dkKCs {
    column-gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width >= 992px) {
  .TvaXx .dkKCs {
    column-gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mbSEj {
  width: 100%;
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 3.2rem;
  margin-top: 1.6rem;
}

.mQiEC {
  background-color: var(--themeColorBackgroundRecessed);
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 100%;
}

.vKGUA {
  background-color: var(--themeColorBluePrimary);
}

.LxySO {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.LxySO::-webkit-scrollbar {
  display: none;
}

._4qeDA {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.cDJY0 {
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--themeColorForegroundTint);
}

.jarck {
  width: 4px;
  height: 4px;
  margin: 0 8px;
  border-radius: 50%;
  background: var(--themeColorForegroundTint);
}

.ffTaw {
  flex: 0 0 auto;
  max-width: 250px;
  padding: 8px 16px;
  overflow: hidden;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--themeColorForegroundPrimary);
  font-size: var(--themeFontSizeBody);
  font-weight: var(--themeFontWeightNormal);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.prWYQ {
  background: var(--themeColorBluePrimary);
  color: var(--themeColorBackgroundPrimary);
  font-weight: var(--themeFontWeightBold);
}

.wjmgu {
  display: flex;
  align-items: center;
  /* No justify-content: center here on purpose — a centered flex row wider than its container
     starts scrolled to a clipped, off-center position in every browser. The active tab is
     centered by explicitly setting scrollLeft in SubMenuTabs.tsx instead. */
  gap: 16px;
  /* Half the row's own width as padding on each end — otherwise the browser clamps scrollTo
     to [0, scrollWidth - clientWidth], so the first/last tab can never actually reach the
     center of the viewport; it just hits the clamp and sits flush against the edge instead. */
  padding: 0 50%;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 32px, black calc(100% - 32px), transparent 100%);
}

.wjmgu::-webkit-scrollbar {
  display: none;
}

.vNm9- {
  flex: 0 0 auto;
  max-width: 300px;
  padding: 0;
  overflow: hidden;
  border: none;
  background: transparent;
  color: var(--themeColorForegroundSecondary);
  font-size: var(--themeFontSizeTitle);
  font-weight: var(--themeFontWeightBold);
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.KW7Wj {
  color: var(--themeColorForegroundPrimary);
}

.nC8A6 {
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.CnyVy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--themeColorForegroundTint);
}

.BrRtt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

._328zl {
  margin: 0;
  color: var(--themeColorForegroundPrimary);
  font-size: var(--themeFontSizeH4);
  font-weight: var(--themeFontWeightBold);
}

.AVVaq {
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.Huk7Q {
  padding: 16px 0 8px;
  color: var(--themeColorForegroundSecondary);
  font-size: var(--themeFontSizeCaption);
  font-weight: var(--themeFontWeightBold);
  text-transform: uppercase;
}

.uyZeG {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v7FFR {
  border-bottom: 1px solid var(--themeColorForegroundTint);
}

.v7FFR:last-child {
  border-bottom: none;
}

.PYfV3 {
  display: flex;
  width: 100%;
  padding: 16px 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.aV4JT {
  color: var(--themeColorForegroundPrimary);
  font-size: var(--themeFontSizeBody);
}

.dXGKa {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  visibility: hidden;
  background: linear-gradient(
    to bottom,
    var(--themeColorBackgroundPrimary) 0%,
    var(--themeColorBackgroundPrimary) 75%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.dXGKa::before {
  content: '';
  position: absolute;
  inset: 0 0 -24px;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
}

.l5\+O8 {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.AmGnK {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 16px;
}

.bFS\+f {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  overflow: hidden;
}

.-DlKf {
  overflow: hidden;
  color: var(--themeColorForegroundPrimary);
  font-size: var(--themeFontSizeTitle);
  font-weight: var(--themeFontWeightBold);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.oTJd4,
._33aZh {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
}

.v9nfZ {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--themeColorForegroundTint);
}

@media (width >= 768px) {
  .dXGKa {
    display: none;
  }
}


/*# sourceMappingURL=OrderDelivery-containers-merchant_93d11426d38cb478486c.css.map*/