/* 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: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  padding-bottom: 24px;
}

.BrRtt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--themeColorBackgroundRecessed);
  cursor: pointer;
}

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

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

.SuArD + .SuArD {
  padding-top: 40px;
}

.Huk7Q {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--themeColorForegroundTint);
  color: var(--themeColorForegroundPrimary);
  font-size: var(--themeFontSizeTitle);
  font-weight: var(--themeFontWeightBold);
}

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

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

.PYfV3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

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

.JBMNP {
  display: flex;
  flex: 0 0 auto;
}

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

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

/* Scoped under .wrapper to outrank SearchFooter's own single-class rules, which
   styled-components injects after this stylesheet. */
.qG3jM .pjK4u {
  background: var(--themeColorBluePrimary);
  box-shadow: 0 4px 16px 0 var(--themeColorShadow);
}

.qG3jM .s0Hum {
  color: var(--themeColorBackgroundPrimary);
}

.rRkwt {
  position: relative;
  display: flex;
  flex: 0 0 auto;
}

.npYfQ {
  position: absolute;
  top: -2px;
  right: -2px;
  display: flex;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  background: var(--themeColorRedPrimary);
  color: var(--themeColorWhite);
  font-size: var(--themeFontSizeCaption);
  font-weight: var(--themeFontWeightBold);
  line-height: 1;
  pointer-events: none;
}

._6ejK\+ {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* A variable, because MenuBody sizes the results panel off the same constant. */
  height: var(--menu-search-header-height);
  z-index: 3; /* zindex.mobileHeader — a module stylesheet can't read the JS constant. */
  background: var(--themeColorBackgroundPrimary);
}

/* The pill from Discover's search screen (MobileRetailerSearchWrapper), on the menu's own field
   so the results below keep their existing treatment. Scoped under .wrapper to outrank
   StyledMenuSearch, which styled-components injects after this stylesheet. */
._6ejK\+ .zXVRn {
  max-width: none;
  padding: 8px 24px 16px;
}

._6ejK\+ .dd9e- {
  min-width: 0;
  height: 56px;
  padding: 2px 48px;
  border-radius: 40px;
  background: var(--themeColorBackgroundRecessed);
  font-size: var(--themeFontSizeTitle);
  font-weight: var(--themeFontWeightNormal);
}

._6ejK\+ .dd9e-::placeholder {
  color: var(--themeColorForegroundDisabled);
}

._6ejK\+ .dd9e-:focus {
  border: 1px solid var(--themeColorBluePrimary);
  background: var(--themeColorBackgroundRaised);
}

/* FavorFieldInput offers no class for its icon slots, and they are the only spans it renders.
   They sit at a fixed offset tuned for the shorter default field. */
._6ejK\+ .zXVRn span {
  top: 50%;
  transform: translateY(-50%);
}


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