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

/* ─── Scrolling hero header (poster + overlaid title/description) ───────────────
   Full-bleed category hero. The poster image fills the frame and the title +
   description sit overlaid at the bottom inside a gradient/blur band so the text
   stays legible over varying imagery (see Figma 465:10210 mobile / 58:1997
   desktop). Lives in normal document flow so it scrolls off-screen with the
   page; the navigation controls (TransparentHeader) float above it. */
._4\+ka6 {
  position: relative;
  width: 100%;

  /* Mobile hero is square per Figma (393×393). */
  aspect-ratio: 1 / 1;
  overflow: hidden;

  /* The Overlay is a fixed-height flex column; without this the hero's height is
     shrunk to fit once the sections below grow tall, and overflow:hidden clips the
     poster away. Keep its aspect-ratio height regardless of sibling content. */
  flex-shrink: 0;
}

._4\+ka6 > ._9AmNq {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The gradient/blur band and the title live in HeroTitleBand, shared with the menu page
   hero. The pill is a child of that band's wrapper, whose class is a CSS-module hash, so
   it can't be reached as a direct child here. */
._4\+ka6 ._08-lz {
  display: none;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 2rem 1rem 1.6rem;
  border-radius: 4rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  cursor: text;
}

._4\+ka6 ._08-lz > input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 1.6rem;
  font-weight: 600;

  /* Fixed dark color — pill is always light (frosted glass), regardless of page theme */
  color: rgba(31, 44, 50, 1);
}

._4\+ka6 ._08-lz > input::placeholder {
  color: rgba(70, 87, 94, 0.85);
  font-weight: 600;
}

._4\+ka6 ._08-lz > .ObHXi {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

@media (width >= 768px) {
  ._4\+ka6 ._08-lz {
    display: flex;
    width: 100%;
    max-width: 50.4rem;
  }
}

@media (width >= 992px) {
  ._4\+ka6 {
    /* Desktop hero is 1200×540 ≈ 20:9, capped so it doesn't grow unbounded. */
    aspect-ratio: 20 / 9;
    max-height: 54rem;
  }

  ._4\+ka6 ._08-lz {
    flex-shrink: 0;
    width: 36.3rem;
    max-width: none;
  }
}

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

/* Slide the panel in from the right, mirroring the menu's "all aisles" panel
   (StyledResponsivePanel) and the landing overlay itself. */
@keyframes wH4lx {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* ─── "See all" vertical category panel (mobile only) ──────────────────────────
   A full-screen panel layered over the landing overlay that lists the same
   categories as the bubble row, stacked vertically (image + title + chevron).
   Reached from the "see all" affordance; the back control closes it. */
.mthcM {
  position: fixed;
  inset: 0;
  z-index: 5; /* zindex.modal — a module stylesheet can't read the JS constant. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--themeColorBackgroundPrimary);
  animation: wH4lx 0.2s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .mthcM {
    animation: none;
  }
}

.mthcM > .rfRUV {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.6rem;
  border-bottom: 1px solid var(--themeColorForegroundTint);
}

.mthcM > .rfRUV > .hImTq {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.mthcM > .rfRUV > .uMl-Q {
  margin: 0;
  color: var(--themeColorForegroundPrimary);
  font-size: var(--themeFontSizeH5);
  font-weight: var(--themeFontWeightBold);
}

.mthcM > .V9BAT {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

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

.mthcM .F2S2n {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem;
  text-decoration: none;
  color: var(--themeColorForegroundPrimary);
}

.mthcM .Q-tdz {
  flex: 0 0 auto;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--themeColorForegroundTint);
}

.mthcM ._0bABE {
  flex: 1;
  margin: 0;
  font-size: var(--themeFontSizeBody);
  font-weight: var(--themeFontWeightNormal);
}

.mthcM ._8tH6e {
  flex: 0 0 auto;
  display: inline-flex;
}

/* ─── "Shop by Category" header (phone only) ───────────────────────────────────
   Copied verbatim from the menu's "Shop By Aisle" header
   (MenuBody/StyledComponents) so the two stay visually identical. The only change
   is that "see all" is a button (it toggles the local category panel) rather than
   the menu's route Link, hence the minimal button reset. */
.fTnu\+ {
  padding: 1.6rem;
}

.kFiBA {
  width: 100%;
  font-size: var(--themeFontSizeH5);
  font-weight: 800;
}

.ChBlO {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--themeColorBluePrimary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

/* The bubble section owns its spacing (it is not wrapped in the padded
   LandingSection wrapper) so the header's 1.2rem inset and the bubble row's own
   padding line up exactly like the menu. On non-phone viewports the header is
   omitted, so add top spacing and center the row. */
.pdp\+h {
  padding-bottom: 2.4rem;
}

@media (width >= 768px) {
  .pdp\+h {
    padding-top: 2.4rem;
  }

  /* `scroll-container` is a plain global class hard-coded by HorizontalScroll. */
  .pdp\+h .scroll-container {
    justify-content: center;
  }
}

@media (width >= 992px) {
  .pdp\+h {
    padding-bottom: 3.2rem;
  }
}

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

/* Heroes are full-bleed banners, so — like the "Shop by Category" bubbles — they
   intentionally sit outside the padded `LandingSection` wrapper. The scroller bleeds to
   the screen edge; only the left edge is inset on mobile to line up with the rest of the
   landing content. */
.RoicL {
  margin-bottom: 2.4rem;
}

.RoicL > .tcuNo {
  margin: 0 1.6rem 1.6rem;
  color: var(--themeColorForegroundPrimary);
  font-size: var(--themeFontSizeH4);
  font-weight: var(--themeFontWeightBold);
}

.RoicL > .Zt\+3L {
  margin: 0 6.4rem 1.6rem;
  overflow: hidden;
}

@media (width >= 375px) {
  .RoicL > .Zt\+3L {
    padding-left: 1rem;
  }
}

@media (width >= 768px) {
  .RoicL > .Zt\+3L {
    padding-left: 0;
  }
}

@media (width >= 992px) {
  .RoicL {
    margin-bottom: 3.2rem;
  }

  .RoicL > .tcuNo {
    margin: 0 6.4rem 1.6rem;
  }
}

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

/* ─── Promotion section scaffold ───────────────────────────────────────────────
   Renders the section frame and (optional) title. The section content itself
   (BUBBLES → MECH-6110, INLINE_ITEMS → MECH-6114) is rendered by sibling tickets. */
._3i0GL {
  padding: 0 1.6rem 2.4rem;
}

._3i0GL > .uV\+UW {
  margin: 0 0 1.6rem;
  color: var(--themeColorForegroundPrimary);
  font-size: var(--themeFontSizeH4);
  font-weight: var(--themeFontWeightBold);
}

@media (width >= 992px) {
  ._3i0GL {
    padding: 0 6.4rem 3.2rem;
  }
}

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

@media (width >= 768px) {
  .WFVNY {
    padding: 2.4rem 1.6rem;
  }
}

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

/* Centered empty/error block shown in place of the item grid. The featured-list
   page has no such states; the landing category list does (per MECH-6112), so
   this is the one bit of presentation it adds on top of the shared layout. */
.Cx-i1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 4rem 1.6rem;
  text-align: center;
}

.Cx-i1 > .OFvgV {
  margin: 0;
  color: var(--themeColorForegroundPrimary);
  font-size: var(--themeFontSizeH5);
  font-weight: var(--themeFontWeightBold);
}

.Cx-i1 > .GkY7p {
  margin: 0;
  color: var(--themeColorForegroundSecondary);
  font-size: var(--themeFontSizeBody);
}

.Cx-i1 > .cxHOu {
  appearance: none;
  margin-top: 0.8rem;
  padding: 1.2rem 2.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--themeColorBluePrimary);
  color: var(--themeColorBackgroundPrimary);
  font-size: var(--themeFontSizeBody);
  font-weight: var(--themeFontWeightBold);
  cursor: pointer;
}

.oaQGa {
  position: fixed;
  inset: 0;
  z-index: 4; /* zindex.sideDrawer — a module stylesheet can't read the JS constant. */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--themeColorBackgroundPrimary);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  pointer-events: none;
}

/* transform: none (not translateX(0)) — any non-"none" transform makes this element a
   containing block for fixed-position descendants, pinning CategoryList's panel here. */
.Qp799 {
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .oaQGa {
    transform: none;
    transition: none;
  }
}

.GXR5o {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 4rem 1.6rem;
  text-align: center;
}

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

.GXR5o > .ahu7w {
  margin: 0;
  color: var(--themeColorForegroundSecondary);
  font-size: var(--themeFontSizeBody);
}

/* Doubled class so it outranks Loader's own equally specific background: module
   stylesheets are linked before styled-components' injected rules. */
._8Jhgf._8Jhgf {
  background: var(--themeColorBackgroundPrimary);
}


/*# sourceMappingURL=MenuLanding-containers_76301db86324d939dfec.css.map*/