@media (max-width:576px) {
    .responsive-scroll{
        height: 60vh;
        overflow:scroll;
    }

    .d-xs-none {
        display: none !important
    }
    
    .d-xs-block {
        display: block !important
    }

    .responsive-button-txt{
        font-size: 1rem !important;
    }

    .responsive-button-list{
        text-align: center !important;
    }

    .responsive-pad{
        margin-top: 0 !important;
    }
}

/* LUNCH PAGE STYLES */
      .lunch-banner {
         max-width: 720px;
         margin: 0 auto 8px;
      }

      .lunch-tagline {
         font-family: Lora, serif;
         font-size: 1.25rem;
         font-style: italic;
         color: #252525;
         margin-bottom: 20px;
      }

      .lunch-meta {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 10px;
         margin-bottom: 20px;
      }

      .lunch-chip {
         display: inline-block;
         padding: 8px 16px;
         border: 1px solid #9c1427;
         border-radius: 999px;
         font-size: 0.9rem;
         font-weight: 600;
         letter-spacing: 0.04em;
         text-transform: uppercase;
         color: #9c1427;
         white-space: nowrap;
      }

      .lunch-chip-price {
         background: #9c1427;
         color: #fff;
      }

      .lunch-intro {
         font-size: 15px;
         line-height: 1.6;
         color: #444;
      }

      .lunch-closing {
         margin-top: 48px;
         padding-top: 24px;
         border-top: 3px solid #9c1427;
      }

      .lunch-closing-line {
         font-family: Lora, serif;
         font-size: 1.6rem;
         font-weight: bold;
         color: #9c1427;
         margin-bottom: 8px;
      }

      .lunch-closing-sub {
         font-size: 0.95rem;
         font-weight: 600;
         letter-spacing: 0.04em;
         text-transform: uppercase;
         color: #252525;
      }

      /* ------------------------------------------------------------------
            Category jump nav - pinned under the fixed site header at every
            width, so a guest can skip ahead from anywhere in the page. The
            menu still reads straight down without ever touching it.
            ------------------------------------------------------------------ */
      /* The site header is position:fixed, but its height is not constant -
            it changes with the breakpoint and shrinks again once the page is
            scrolled. The script at the foot of the page measures it live and
            publishes it as --lunch-header-h; the fallbacks below are only what
            applies for the instant before that first measurement. */
      .menuTab {
         position: -webkit-sticky;
         position: sticky;
         top: var(--lunch-header-h, 108px);
         z-index: 1020;
         /* under the header's 1030 */
         background: #fff;
         padding: 8px 8px 0;
         border-bottom: 2px solid #357f44;

         /* Never wrap. At full pill size the three labels only fit on one
               line on a wide screen - left to wrap they became a 173px block,
               and a pinned strip that tall eats the menu. Scrolling sideways
               on the rare narrow desktop is the lesser cost, and it keeps the
               strip one predictable height at every width. */
         flex-wrap: nowrap;
         overflow-x: auto;
         overflow-y: hidden;
         -webkit-overflow-scrolling: touch;
         scrollbar-width: none;
      }

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

      .menuTab .nav-item {
         flex: 0 0 auto;
         /* The theme adds 10px here below 768px, which made the clearance
               under the pills a different size at every breakpoint. */
         margin-bottom: 0;
      }

      .menuTab .nav-link {
         white-space: nowrap;
         /* The theme's pill has no bottom margin, which left it sitting
               flush on the strip's green underline. Lift it clear. */
         margin-bottom: 12px;
      }

      /* Jumping to a category must clear the fixed header AND the pinned
            strip, otherwise the heading lands behind them. */
      .lunch-section {
         scroll-margin-top: calc(var(--lunch-header-h, 108px) + var(--lunch-strip-h, 92px) + 16px);
      }

      /* The categories run one after another now, so they need air between
            them - as tab panes only ever one showed at a time. */
      .lunch-section+.lunch-section {
         margin-top: 40px;
      }

      /* ------------------------------------------------------------------
            Feedback survey button + modal
            ------------------------------------------------------------------ */
      .lunch-feedback {
         text-align: center;
         padding: 8px 16px 56px;
      }

      .lunch-feedback-btn {
         display: inline-block;
         padding: 14px 28px;
         border: 2px solid #9c1427;
         border-radius: 999px;
         background: #9c1427;
         color: #fff;
         font-family: "Work Sans", sans-serif;
         font-size: 0.9rem;
         font-weight: 600;
         letter-spacing: 0.08em;
         text-transform: uppercase;
         line-height: 1;
         cursor: pointer;
         transition: background 0.2s, color 0.2s;
      }

      .lunch-feedback-btn:hover,
      .lunch-feedback-btn:focus {
         background: #fff;
         color: #9c1427;
         text-decoration: none;
      }

      .lunch-feedback-btn-outline {
         background: #fff;
         color: #9c1427;
      }

      .lunch-feedback-btn-outline:hover,
      .lunch-feedback-btn-outline:focus {
         background: #9c1427;
         color: #fff;
      }

      .lunch-feedback-open {
         display: inline-flex;
         align-items: center;
         gap: 10px;
         padding: 18px 36px;
         border: 0;
         border-radius: 4px;
         /* background: #357f44; */
         background: #9c1427;
         color: #fff;
         /* font-family: Lora, serif; */
         font-size: 1.15rem;
         font-weight: bold;
         cursor: pointer;
         /* box-shadow: 0 4px 0 #245a30; */
         box-shadow: 0 4px 0 #9c1427;
         transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
      }

      .lunch-feedback-open:hover,
      .lunch-feedback-open:focus {
         /* background: #2c6a39; */
         background: #77101e;
         transform: translateY(2px);
         /* box-shadow: 0 2px 0 #245a30; */
         box-shadow: 0 2px 0 #77101e;
      }

      .lunch-feedback-open .fa {
         font-size: 1.3rem;
      }

      .lunch-modal {
         position: fixed;
         inset: 0;
         z-index: 2000;
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 16px;
         background: rgba(0, 0, 0, 0.6);
      }

      .lunch-modal[hidden] {
         display: none;
      }

      .lunch-modal-box {
         position: relative;
         width: 100%;
         max-width: 460px;
         padding: 40px 28px 32px;
         background: #fff;
         border-top: 5px solid #9c1427;
         border-bottom: 3px solid #357f44;
         text-align: center;
         box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      }

      .lunch-modal-close {
         position: absolute;
         top: 8px;
         right: 14px;
         border: 0;
         background: none;
         font-size: 1.8rem;
         line-height: 1;
         color: #252525;
         cursor: pointer;
      }

      .lunch-modal-title {
         font-family: Lora, serif;
         font-size: 1.5rem;
         font-weight: bold;
         color: #9c1427;
         margin-bottom: 12px;
      }

      .lunch-modal-text {
         font-family: Lora, serif;
         font-size: 1.1rem;
         /* font-style: italic; */
         color: #252525;
         margin-bottom: 24px !important;
      }

      .lunch-modal-actions {
         display: flex;
         justify-content: center;
         gap: 12px;
      }

      .lunch-modal-actions .lunch-feedback-btn {
         min-width: 110px;
      }

      @media (max-width: 576px) {
         .lunch-tagline {
            font-size: 1.05rem;
         }

         .lunch-chip {
            font-size: 0.78rem;
            padding: 7px 13px;
         }

         .lunch-closing-line {
            font-size: 1.3rem;
         }

         .lunch-closing-sub {
            font-size: 0.8rem;
         }

         /* Only nine items - no need to trap the list in a 60vh scroller */
         .responsive-scroll {
            height: auto;
            overflow: visible;
         }

         /* The site header is position:fixed and 108px tall, but below 576px
               the banner row is only 70px - so the logo underneath was being
               clipped by ~38px. Push the page content clear of the header.
               (From 576px up the 310px banner row shows instead, which already
               clears the header, so this offset must not apply there.) */
         #wrap-content {
            padding-top: 110px;
         }
      }

      /* ------------------------------------------------------------------
            Compact jump nav.
            The three full-size pills need about 1000px of container to sit on
            one line, and up to 767px the theme stacks them into a tall vertical
            column outright. Anywhere under 1200px they would wrap to two or
            three rows - 255px of pinned strip at 900px wide - so below that
            they collapse into a single horizontally scrollable row instead.
            The whole menu still reads top to bottom without touching them.
            ------------------------------------------------------------------ */
      @media (max-width: 1199.98px) {
         .menuTab {
            flex-direction: row;
            justify-content: flex-start;
            margin-top: 24px;
         }

         .menuTab .nav-link {
            display: flex;
            align-items: center;
            min-height: 44px;
            /* comfortable tap target */
            padding: 10px 14px;
            margin: 0 8px 12px 0;
            font-size: 0.8rem;
            line-height: 1.2;
            white-space: nowrap;
         }

         .responsive-scroll {
            height: auto;
            overflow: visible;
         }
      }