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

/* 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_3a67d291583df72da017.css.map*/