/* Generated 2026-10-18 from _nav_partial2.php (moved out of the inline <style> so browsers and Cloudflare cache it; the page
   HTML shrank ~70%). Edit THIS file now; the partial only links it. */
/* ===== PaperBakes top nav (mirror of live site) ===== */

.pb-nav {
    position: fixed;
    top: 8px;
    left: 20px;
    width: calc(100% - 40px);
    z-index: 9999;
    box-sizing: border-box;
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
}

/* One clean bar: white panel, soft hairline (no red grid), gentle lift. */
.pb-nav__row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0 36px;
    min-height: 64px;
    background: #fefdfb;
    border: 2px solid #f0e2d7;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(58, 42, 28, 0.14);
}
/* Remove the bar's shadow while a dropdown is open so it doesn't cast over the
   panel that slides out from behind the bar. CSS-only via :has() (no JS). */
.pb-nav__row:has(.pb-mtcn.is-open),
.pb-nav__row:has(.pb-mtcn.is-order-open),
.pb-nav__row:has(.pb-nav__order.is-open),
.pb-nav__row:has(.pb-nav__item--has-dropdown:hover) {
    box-shadow: none;
}

.pb-nav__col { box-sizing: border-box; }
.pb-nav__col--mobile { display: none; }

/* Brand / logo, pinned left. */
.pb-nav__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
    padding: 6px 0;
}
/* Flexible gap that pushes the action buttons to the right. */
.pb-nav__spacer { flex: 1 1 auto; }

/* ----- Desktop text links: Home / About Us / Locations / Contact ----- */
/* Links stretch to full bar height so the active underline can sit flush at
   the bottom edge of the nav bar. */
.pb-nav__links-nav { flex: 0 1 auto; align-self: stretch; display: flex; }
.pb-nav__links {
    display: flex;
    align-items: stretch;
    gap: 72px;
    margin: 0 0 0 52px;
    padding: 0;
    list-style: none;
    background: transparent;
}
.pb-nav__links .pb-nav__item {
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
}
/* Half-height divider centered in the gap between text links, in the bar's
   border color. The 40px gap means -20px lands the line dead-center. */
.pb-nav__links .pb-nav__item + .pb-nav__item::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background: #f0e6d8;
}
.pb-nav__links .pb-nav__item a {
    display: flex;
    align-items: center;
    padding: 0 4px;
    text-decoration: none;
    color: #48210e;
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    border: 0;
    background: transparent;
    border-radius: 8px;
    transition: color 0.15s ease;
}
.pb-nav__links .pb-nav__item a:hover { color: #cb333b; }
.pb-nav__links .pb-nav__item.is-active a { color: #cb333b; }
/* Active-page indicator: a short red underline bar under the link. */
.pb-nav__links .pb-nav__item.is-active a::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #cb333b;
}

/* ----- Rewards container (guest): fills the gap between the links and the
   Order Online button. Warm cream fill, links to Rewards, labelled Login /
   Sign-up. ----- */
.pb-nav__rewards-btn { flex: 0 0 auto; display: flex; align-items: center; margin-left: auto; }
.pb-nav__rewards-btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    padding: 10px 18px;
    text-decoration: none;
    color: #fff;
    background: #cb333b;
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    border: 0;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.pb-nav__rewards-btn a:hover { background: #8b0c12; color: #fff; }
.pb-nav__rewards-btn.is-active a { background: #8b0c12; color: #fff; }

/* ----- Order Online button: its own solid red container ----- */
.pb-nav__order { flex: 0 0 auto; position: relative; margin-left: 10px; }
.pb-nav__rewards-icon { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.pb-nav__order .pb-nav__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    color: #fff;
    background: #cb333b;
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    /* Pin line-height so the <button> matches the link metrics. */
    line-height: 1.2;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none;
    background-image: none;
    outline: none;
    transition: background 0.15s ease;
}
.pb-nav__order .pb-nav__dropdown-toggle:hover { background: #8b0c12; }
.pb-nav__order.is-active .pb-nav__dropdown-toggle { background: #8b0c12; }
.pb-nav__order-icon { width: 18px; height: 18px; display: block; flex-shrink: 0; object-fit: contain; }

/* ===== Order Online dropdown (anchored under the button) ===== */
.pb-nav__item--has-dropdown { position: relative; }
/* Invisible bridge across the 8px gap so moving the cursor from the button
   to the dropdown doesn't drop the :hover and close the menu. */
.pb-nav__item--has-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}
.pb-nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fefdfb;
    border: 2px solid #f0e2d7;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 10001;
    box-shadow: 0 10px 24px rgba(58, 42, 28, 0.16);
}
.pb-nav__item--has-dropdown:hover .pb-nav__dropdown,
.pb-nav__item--has-dropdown.is-open .pb-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear;
}
.pb-nav__dropdown li { margin: 0; padding: 0; list-style: none; }
.pb-nav__dropdown li a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    background: #fefdfb;
    color: #cb333b;
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
    line-height: 1.2;
    text-decoration: none;
    text-align: left;
    border: 0;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.pb-nav__dropdown li a:hover { background: #cb333b; color: #fff; }
.pb-nav__dropdown-label    { font-size: 15px; font-weight: 700; }
.pb-nav__dropdown-sublabel { font-size: 13px; font-weight: 400; color: #000;
                             letter-spacing: 0.02em; }
/* Only real-hover devices flip the sublabel on :hover. On touch :hover
   can stick after tap release and leave a ghost color. */
@media (hover: hover) and (pointer: fine) {
    .pb-nav__dropdown li a:hover .pb-nav__dropdown-sublabel { color: #fff; }
}
.pb-nav__dropdown li a:active .pb-nav__dropdown-sublabel { color: #fff; }

/* Visual cue: the order button darkens while its dropdown is open */
.pb-nav__item--has-dropdown:hover .pb-nav__dropdown-toggle,
.pb-nav__item--has-dropdown.is-open .pb-nav__dropdown-toggle {
    background: #8b0c12;
    color: #fff;
}

.pb-nav__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    text-decoration: none;
}
.pb-nav__logo img {
    display: block;
    height: 34px;
    width: auto;
    object-fit: contain;
    border-radius: 0;
}
/* Member: the rewards logo in the brand is hidden on desktop (the original
   logo stays); it's revealed only on the condensed bar (mobile media query).
   Selector matches the `.pb-nav__logo img` base specificity so it wins. */
.pb-nav__logo img.pb-nav__logo-img--rewards { display: none; }
/* Rewards logo shown in front of the points on the desktop bar. */
.pb-nav__pts-logo { display: block; height: 24px; width: auto; object-fit: contain; }

/* Member cluster (points chip + inbox). Sits in the actions area on desktop
   (replacing the Rewards button); the responsive block re-positions it next
   to the logo on mobile. Neutralize the old logo-baseline nudge + left
   separator that only made sense beside the logo. */
.pb-nav__member {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    /* Spacer was removed so the guest Rewards container can fill the gap;
       push the member cluster to the right edge here instead. */
    margin-left: auto;
}
.pb-nav__member .pb-nav__pts-chip { transform: none; padding: 6px 10px; }
.pb-nav__member .pb-nav__pts-chip::before { display: none; }
.pb-nav__member .pb-nav__inbox-link { transform: none; }
.pb-nav__pts-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.pb-nav__pts-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    /* Padding gives the separator pseudo (left) and the press-state
       rectangle (right) breathing room. Vertical padding is generous
       enough to cover the lifted digits in .pb-nav__pts-num (which has
       position:relative + top:-1px). */
    position: relative;
    padding: 8px 14px 6px 16px;
    border-radius: 0;
    line-height: 1;
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
    color: #cb333b;
    background: transparent;
    font-variant-numeric: tabular-nums;
    /* The rewards logo image is visually weighted at the bottom (the word
       "rewards" sits along the baseline), so a vertically-centered text chip
       reads as floating high. Nudge the chip down to align optically with the
       logo's baseline rather than its geometric center. */
    transform: translateY(3px);
    transition: background-color 0.12s ease, color 0.12s ease;
}
/* Thin red separator between the rewards logo and the points number.
   Implemented as a centred ::before instead of a full-height border-left
   so its length is short and the top/bottom gaps are guaranteed equal. */
.pb-nav__pts-chip::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: rgba(203, 51, 59, 0.3);
    transition: background-color 0.12s ease;
}
/* Tactile press feedback — matches the inbox bell's :active style. Red
 * pill fills in with white text on mouse-down / tap-press, fades back on
 * release. The separator hides during press so the filled rectangle reads
 * as a single solid shape. */
.pb-nav__pts-link:active .pb-nav__pts-chip {
    background: #cb333b;
    color: #fff;
}
.pb-nav__pts-link:active .pb-nav__pts-chip::before {
    background: transparent;
}
.pb-nav__pts-num {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.01em;
    position: relative;
    top: 1px;
}
/* "POINTS" rendered as a typographic eyebrow — uppercase, tracked, smaller,
   and slightly faded. Reads as a deliberate brand label instead of a noun. */
.pb-nav__pts-label {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
    align-self: center;
    /* Stack inside the chip so the label sits in its own slot beside the
       number rather than baseline-stretching the row. */
    position: relative;
    top: 0;
}

/* Inbox bell next to the points chip. Default state: just the icon. When the
   visitor has unread notifications, JS adds .has-notifications which reveals
   a small amber dot on the top-right of the bell. */
.pb-nav__inbox-link {
    display: inline-flex;
    align-items: center;
    position: relative;
    color: #cb333b;
    text-decoration: none;
    line-height: 0;
    padding: 4px;
    margin-left: -4px;     /* tighten gap to the points chip */
    transform: translateY(2px); /* match optical baseline with the points chip */
    transition: color 0.15s ease;
}
/* Default + hover + focus + visited: red icon on transparent background.
 * No state flip on mere hover/focus — we don't want the bell darkening
 * just because the cursor passes over it. */
.pb-nav__inbox-link,
.pb-nav__inbox-link:hover,
.pb-nav__inbox-link:focus,
.pb-nav__inbox-link:visited {
    color: #cb333b;
    background: transparent;
    border-radius: 50%;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.pb-nav__inbox-link { -webkit-tap-highlight-color: transparent; }
/* :active state (mouse-down / tap-press / keyboard space-down) flips to
 * a filled red circle with a white icon — gives tactile press feedback
 * without darkening to black. */
.pb-nav__inbox-link:active {
    background: #cb333b;
    color: #fff;
}
.pb-nav__inbox-icon {
    display: inline-block;
    width: 22px;
    height: 22px;
}
.pb-nav__inbox-icon svg { width: 100%; height: 100%; display: block; }
.pb-nav__inbox-dot {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f3802b;
    border: 2px solid #fff;
    box-sizing: content-box;
    display: none;
}
.pb-nav__inbox-link.has-notifications .pb-nav__inbox-dot { display: block; }
/* When JS has populated the numeric badge, hide the bare dot so we don't
   have both. The dot stays the fallback if .has-count never fires. */
.pb-nav__inbox-link.has-count .pb-nav__inbox-dot { display: none; }
.pb-nav__inbox-count {
    /* Small numeric badge that tucks into the mail icon's right edge.
       Negative margin pulls it back so it overlaps a touch; negative
       margin-top lifts it toward the icon's top-right corner. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -7px;
    margin-top: -7px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: #f3802b;
    color: #fff;
    box-sizing: border-box;
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    align-self: flex-start;
}
.pb-nav__inbox-count[hidden] { display: none; }

/* ===== Mobile two-col nav (≤991.98px) ===== */
.pb-mtcn { width: 100%; position: relative;
           font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
           letter-spacing: 0.2px; font-size: 15px; color: #cb333b; }
.pb-mtcn__bar { display: flex; background: #fefdfb;
                border: 0;
                border-radius: 0 0 8px 8px; overflow: hidden;
                position: relative; z-index: 2; }
.pb-mtcn__toggle, .pb-mtcn__order-toggle {
    width: 50%; min-height: 43px;
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 8px 12px;
    text-decoration: none; color: #cb333b; background: #fefdfb;
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 0;
    cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;
    -webkit-tap-highlight-color: transparent; border-radius: 0;
    outline: none; box-shadow: none; background-image: none;
    font: inherit;
}
.pb-mtcn__toggle { border: 0; }
.pb-mtcn__order-toggle { border: 0; position: relative; }
/* Half-height divider between Menu and Order Online, matching the main nav's
   text-link separators. */
.pb-mtcn__order-toggle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    background: #f0e6d8;
}
/* Hide the divider whenever either half turns red (open or pressed): the cream line otherwise shows as a stray "|"
   at the edge of the red block (owner, 2026-10-18). */
.pb-mtcn.is-order-open .pb-mtcn__order-toggle::before,
.pb-mtcn.is-open .pb-mtcn__order-toggle::before,
.pb-mtcn__order-toggle:active::before,
.pb-mtcn__toggle:active + .pb-mtcn__order-toggle::before { opacity: 0; }
.pb-mtcn__toggle:focus, .pb-mtcn__toggle:focus-visible,
.pb-mtcn__order-toggle:focus, .pb-mtcn__order-toggle:focus-visible { outline: none; box-shadow: none; }
.pb-mtcn__toggle::-moz-focus-inner,
.pb-mtcn__order-toggle::-moz-focus-inner { border: 0; padding: 0; }

.pb-mtcn__toggle:active,
.pb-mtcn__order-toggle:active,
.pb-mtcn__pulldown a:active,
.pb-mtcn__order-pulldown a:active { background: #cb333b; color: #fff; }

.pb-mtcn.is-open .pb-mtcn__toggle {
    background: #cb333b; color: #fff; border-bottom: none;
}
.pb-mtcn.is-order-open .pb-mtcn__order-toggle {
    background: #cb333b; color: #fff; border-bottom: none;
}

/* Mobile Order Online icon: red at rest, white when the order pulldown is
   open (or the toggle is pressed/hovered). Two stacked <img> elements so
   both files preload and the swap is a pure opacity crossfade — no layout
   shift, no second network request on first interaction. */
.pb-mtcn__order-icon {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 0;
    top: -1px;
    vertical-align: middle;
    flex-shrink: 0;
}
/* Tighten the icon-to-text spacing on the order toggle. The shared
   toggle rule sets `gap: 10px` (right for the burger's icon + "Menu"),
   but the delivery icon should sit much closer to the "Order Online"
   text — override the gap here. */
.pb-mtcn__order-toggle { gap: 4px; }
.pb-mtcn__order-icon-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.15s ease;
}
.pb-mtcn__order-icon-img--white { opacity: 0; }
.pb-mtcn.is-order-open .pb-mtcn__order-toggle .pb-mtcn__order-icon-img--red,
.pb-mtcn__order-toggle:active            .pb-mtcn__order-icon-img--red   { opacity: 0; }
.pb-mtcn.is-order-open .pb-mtcn__order-toggle .pb-mtcn__order-icon-img--white,
.pb-mtcn__order-toggle:active            .pb-mtcn__order-icon-img--white { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .pb-mtcn__order-toggle:hover .pb-mtcn__order-icon-img--red   { opacity: 0; }
    .pb-mtcn__order-toggle:hover .pb-mtcn__order-icon-img--white { opacity: 1; }
}

.pb-mtcn__icon { position: relative; width: 15px; height: 8px; }
.pb-mtcn__icon span {
    position: absolute; width: 100%; height: 2px;
    background: #cb333b; left: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.2s ease;
}
.pb-mtcn__icon span:first-child { top: 0; }
.pb-mtcn__icon span:last-child  { bottom: 0; }
.pb-mtcn.is-open .pb-mtcn__icon span:first-child { top: 3px; transform: rotate(45deg); }
.pb-mtcn.is-open .pb-mtcn__icon span:last-child  { bottom: 3px; transform: rotate(-45deg); }
.pb-mtcn.is-open .pb-mtcn__icon span,
.pb-mtcn__toggle:active .pb-mtcn__icon span { background: #fff; }

/* Shared pulldown look.
   Both panels are absolutely positioned at top:100% of .pb-mtcn so they
   occupy the same anchor point below the bar. If they shared document
   flow, the order panel would visibly "settle up" while the burger panel
   was closing above it (its parent height shrinking would drag the order
   panel up while it tried to translateY-down). Anchored absolutely, each
   panel animates against the bar, never against its neighbor.

   `will-change` hints the browser to pre-allocate a compositor layer for
   the animated properties. Without this, the first activation pays for
   layer creation and the user perceives it as a delayed open; subsequent
   activations reuse the warmed-up layer and feel instant. */
.pb-mtcn__pulldown,
.pb-mtcn__order-pulldown {
    background: #fefdfb;
    border-left: 2px solid #f0e2d7;
    border-right: 2px solid #f0e2d7;
    border-bottom: 2px solid #f0e2d7;
    border-radius: 8px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-30px);
    transition: max-height 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform  0.85s cubic-bezier(0.22, 1, 0.36, 1),
                opacity    0.35s ease;
    position: absolute;
    /* Tuck 8px up behind the bar (which has a higher z-index) so the panel
       reads as sliding out from BEHIND the nav bar, not over it. */
    top: calc(100% - 8px);
    padding-top: 8px;
    left: 0;
    right: 0;
    /* Negative so the panel sits BEHIND the main nav bar's own background and
       border (which is an unpositioned block), making it slide out from behind
       the bar. Still inside .pb-nav's z-index:9999 context, so it stays above
       the page content. */
    z-index: -1;
    will-change: max-height, transform, opacity;
}
.pb-mtcn.is-open .pb-mtcn__pulldown,
.pb-mtcn.is-order-open .pb-mtcn__order-pulldown {
    max-height: 400px; opacity: 1; transform: translateY(0);
}
.pb-mtcn__pulldown a,
.pb-mtcn__order-pulldown a {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 16px; min-height: 40px;
    color: #cb333b; text-decoration: none;
    border-top: 1px solid #f0e6d8; text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
}
.pb-mtcn__pulldown a:first-child,
.pb-mtcn__order-pulldown a:first-child { border-top: none; }

/* Separator between burger-menu links: half width, centered (not full width). */
.pb-mtcn__pulldown a { position: relative; border-top: 0; }
.pb-mtcn__pulldown a + a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 1px;
    background: #f0e6d8;
}

/* Active-page indicator on the burger-menu links: a red underline hugging the
   text, matching the main nav's active text links. */
.pb-mtcn__pulldown a.is-active { font-weight: 700; }
.pb-mtcn__pulldown a.is-active span { position: relative; display: inline-block; }
.pb-mtcn__pulldown a.is-active span::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #cb333b;
}

/* Emphasise the Rewards row: bold label + a small gift icon so it reads as the
   key item without a full colour block. Icon inherits the link colour (red at
   rest, white on hover/active). gap spaces the icon from the text label. */
/* Highlight the Rewards row: soft red-tinted background + bold label + a small
   gift icon, so it stands out as the key item while staying the same size and
   layout as the other rows. */
.pb-mtcn__pulldown a.pb-mtcn__pulldown-rewards {
    font-weight: 700;
    gap: 7px;
    background: #fdeeee;
}
.pb-mtcn__pulldown-rewards-icon { flex: 0 0 auto; display: block; }

/* Order pulldown rows stack a main label and a sublabel */
.pb-mtcn__order-pulldown a {
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    min-height: 48px;
    line-height: 1.2;
}
.pb-mtcn__order-pulldown-label    { font-size: 15px; font-weight: 600; }
.pb-mtcn__order-pulldown-sublabel { font-size: 13px; font-weight: 400; color: #000;
                                    letter-spacing: 0.02em; }
/* :active fires during touch press only (clears on release), so it's safe
   outside the hover media query. :hover is gated behind a real-hover
   device check because mobile browsers leave :hover sticky after a tap. */
.pb-mtcn__order-pulldown a:active .pb-mtcn__order-pulldown-sublabel { color: #fff; }
@media (hover: hover) and (pointer: fine) {
    .pb-mtcn__order-pulldown a:hover .pb-mtcn__order-pulldown-sublabel { color: #fff; }
}

@media (hover: hover) and (pointer: fine) {
    .pb-mtcn__toggle:hover,
    .pb-mtcn__order-toggle:hover,
    .pb-mtcn__pulldown a:hover,
    .pb-mtcn__order-pulldown a:hover { background: #cb333b; color: #fff; }
    .pb-mtcn__toggle:hover .pb-mtcn__icon span { background: #fff; }
}

/* ===== Responsive breakpoints ===== */
@media (max-width: 1199.98px) {
    .pb-nav__links { gap: 48px; margin-left: 36px; }
    .pb-nav__links .pb-nav__item + .pb-nav__item::before { left: -24px; }
    .pb-nav__links .pb-nav__item a { font-size: 15px; padding: 0 4px; }
    .pb-nav__rewards-btn a,
    .pb-nav__order .pb-nav__dropdown-toggle { font-size: 14px; padding: 9px 14px; }
    .pb-nav__dropdown-label    { font-size: 15px; }
    .pb-nav__dropdown-sublabel { font-size: 13px; }
    .pb-nav__logo img { height: 30px; }
}

/* Tablet / mobile: hide the desktop pieces, show the existing two-col mobile
   bar. The brand fills the top row (logo centered); the member cluster sits
   beside it; the mobile bar wraps to a full-width second row. */
@media (max-width: 991.98px) {
    /* Condensed bar: tighter 10px screen-edge gutter (desktop stays 20px). */
    .pb-nav { left: 10px; width: calc(100% - 20px); }

    .pb-nav__links-nav,
    .pb-nav__spacer,
    .pb-nav__rewards-btn,
    .pb-nav__order { display: none; }

    .pb-nav__row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;
        padding: 0;
        min-height: 0;
        /* No overflow:hidden here — it would clip the Menu/Order pulldowns
           that drop below the bar. */
    }
    .pb-nav__brand {
        flex: 1 1 auto;
        justify-content: center;
        height: 50px;
        padding: 0 16px;
    }
    .pb-nav__logo img { height: 30px; }

    /* Condensed bar (members): swap the original logo for the rewards logo,
       and drop the points-logo (the brand logo already carries the rewards
       mark here). */
    .pb-nav__row.is-member .pb-nav__logo-img--main { display: none; }
    .pb-nav__row.is-member .pb-nav__logo-img--rewards { display: block; }
    .pb-nav__pts-logo { display: none; }

    /* Member top row laid out as a 9-unit grid:
       [pad 1] [rewards logo 3] [points 3] [notif 1] [pad 1].
       display:contents on the member wrapper promotes the points link and the
       inbox link to direct grid cells. The Menu/Order bar spans the 2nd row. */
    .pb-nav__row.is-member {
        display: grid;
        grid-template-columns: 1fr 3fr 3fr 1fr 1fr;
        column-gap: 0;
        align-items: center;
    }
    .pb-nav__row.is-member .pb-nav__brand {
        grid-column: 2;
        grid-row: 1;
        height: 50px;
        padding: 0;
        justify-content: center;
    }
    .pb-nav__row.is-member .pb-nav__member { display: contents; }
    .pb-nav__row.is-member .pb-nav__pts-link {
        grid-column: 3;
        grid-row: 1;
        justify-self: center;
    }
    .pb-nav__row.is-member .pb-nav__inbox-link {
        grid-column: 4;
        grid-row: 1;
        justify-self: center;
    }
    .pb-nav__row.is-member .pb-nav__col--mobile {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .pb-nav__member {
        flex: 0 0 auto;
        padding-right: 16px;
        gap: 6px;
    }

    .pb-nav__col--mobile {
        display: block;
        flex: 0 0 100%;
        max-width: 100%;
        position: relative;
    }
    /* Half-width centered separator between the top (logo) row and the bottom
       (Menu / Order) row of the condensed bar. */
    .pb-nav__col--mobile::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: #f0e6d8;
        /* Above the bar strip (z-index:2) so it isn't painted over. */
        z-index: 3;
    }
}

@media (max-width: 767.98px) {
    .pb-nav__brand { height: 45px; }
    .pb-nav__logo img { height: 28px; }
}

/* ===== Defensive specificity overrides =====
   helixultimate preset ships `.sp-module ul > li > a { color: #252525 }`. That has
   specificity (0,1,3) and beats our class-only rules. Re-asserting brand colors
   under the existing #pbNav / #pbMtcn IDs lifts us to (1,1,1+) which always wins. */
#pbNav .pb-nav__links .pb-nav__item a            { color: #48210e; background: transparent; }
#pbNav .pb-nav__links .pb-nav__item a:hover      { color: #cb333b; background: transparent; }
#pbNav .pb-nav__links .pb-nav__item.is-active a  { color: #cb333b; background: transparent; }
#pbNav .pb-nav__rewards-btn a                    { color: #fff;    background: #cb333b; }
#pbNav .pb-nav__rewards-btn a:hover              { color: #fff;    background: #8b0c12; }
#pbNav .pb-nav__rewards-btn.is-active a          { color: #fff;    background: #8b0c12; }
#pbNav .pb-nav__order .pb-nav__dropdown-toggle       { color: #fff; background: #cb333b; }
#pbNav .pb-nav__order .pb-nav__dropdown-toggle:hover { color: #fff; background: #8b0c12; }
#pbNav .pb-nav__dropdown li a                  { color: #cb333b; background: #fefdfb; }
#pbNav .pb-nav__dropdown li a:hover            { color: #fff;    background: #cb333b; }
#pbNav .pb-nav__item--has-dropdown:hover .pb-nav__dropdown-toggle,
#pbNav .pb-nav__item--has-dropdown.is-open .pb-nav__dropdown-toggle { color: #fff; background: #8b0c12; }
#pbMtcn .pb-mtcn__toggle,
#pbMtcn .pb-mtcn__order-toggle                 { color: #cb333b; background: #fefdfb; }
#pbMtcn .pb-mtcn__pulldown a,
#pbMtcn .pb-mtcn__order-pulldown a             { color: #cb333b; background: #fefdfb; }
#pbMtcn .pb-mtcn__pulldown a.pb-mtcn__pulldown-rewards { background: #fdeeee; font-weight: 700; }
#pbMtcn.is-open .pb-mtcn__toggle,
#pbMtcn.is-order-open .pb-mtcn__order-toggle   { color: #fff;    background: #cb333b; }

/* :active needs id-scoped selectors too, otherwise the (1,1,1) rest-state
   rules above beat the un-scoped `.pb-mtcn__pulldown a:active` and the
   touch-press bg stays white (only the sublabel — which has its own
   active rule — would flip, leaving the rest of the row unchanged). */
#pbMtcn .pb-mtcn__toggle:active,
#pbMtcn .pb-mtcn__order-toggle:active,
#pbMtcn .pb-mtcn__pulldown a:active,
#pbMtcn .pb-mtcn__order-pulldown a:active      { color: #fff; background: #cb333b; }

@media (hover: hover) and (pointer: fine) {
    #pbMtcn .pb-mtcn__toggle:hover,
    #pbMtcn .pb-mtcn__order-toggle:hover,
    #pbMtcn .pb-mtcn__pulldown a:hover,
    #pbMtcn .pb-mtcn__order-pulldown a:hover   { color: #fff; background: #cb333b; }
}
/* ===== Outlet QR-scan confirmation modal =====
   Mirrors the .pb-dine-modal pattern from the in-store-order partial: dark
   backdrop, white card, max-int z-index so it paints above the fixed nav,
   footer, and any sticky chrome. Re-parented to <body> on init so SP Page
   Builder section stacking contexts can't trap it. */
.pb-nav-outlet-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: "Trebuchet MS", Trebuchet, Arial, sans-serif;
}
.pb-nav-outlet-modal[hidden] { display: none; }
.pb-nav-outlet-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(43, 29, 16, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    cursor: pointer;
}
.pb-nav-outlet-modal__card {
    position: relative;
    background: #fefdfb;
    border: 2px solid #f0e2d7;
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.25);
    padding: 28px 24px 24px;
    max-width: 420px;
    width: 100%;
    box-sizing: border-box;
    color: #2b1d10;
    text-align: center;
    animation: pbNavOutletModalIn 0.18s ease-out;
}
/* Circular X close button anchored to the card's top-right. Sits OUTSIDE the
   inner content padding so it doesn't compete with the lead text. The same
   data-pb-nav-outlet-close attribute as the backdrop triggers the close JS. */
.pb-nav-outlet-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    border: 1px solid #f0e2d7;
    border-radius: 50%;
    color: #2b1d10;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pb-nav-outlet-modal__close:hover,
.pb-nav-outlet-modal__close:focus-visible {
    background: #cb333b;
    border-color: #cb333b;
    color: #fff;
    outline: none;
}
.pb-nav-outlet-modal__close svg {
    width: 14px;
    height: 14px;
    display: block;
    pointer-events: none;  /* clicks always hit the button, never the icon */
}
@keyframes pbNavOutletModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.pb-nav-outlet-modal__lead {
    margin: 0 0 12px;
    /* Match the closing "Ready to order…" message exactly so the two flank
       the outlet name as a balanced pair. */
    font-size: 14.5px;
    line-height: 1.45;
    color: #000;
    letter-spacing: 0;
}
.pb-nav-outlet-modal__image-wrap {
    margin: 0 0 12px;
    overflow: hidden;
    border: 2px solid #f0e2d7;
    border-radius: 6px;
    background: #fbf5ee;
}
.pb-nav-outlet-modal__image {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: 50% 50%;
}
.pb-nav-outlet-modal__name {
    /* Tightened bottom margin so "Ready to order…" sits close to the outlet
       name, reading as a continuation rather than a separate block. */
    margin: 0 0 6px;
    color: #cb333b;
    font-size: clamp(1.4rem, 5vw, 1.85rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.15;
    word-break: break-word;
}
.pb-nav-outlet-modal__msg {
    margin: 0 0 20px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #000;
}
.pb-nav-outlet-modal__msg--lead { margin: 0 0 2px; }
/* Reminder to use the rewards email/phone at checkout so the order tags to the
   customer's account. Soft amber note so it reads as a helpful tip. */
.pb-nav-outlet-modal__tip {
    margin: 8px 0 16px;
    padding: 9px 12px;
    background: #fff4e3;
    border: 1px solid #f4d9a5;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #8a6f57;
    text-align: left;
}
.pb-nav-outlet-modal__actions {
    /* Stack vertically: Order Now on top, Choose another location below. */
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pb-nav-outlet-modal__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #cb333b;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 6px;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
    text-align: center;
}
/* Order Now = primary red (the recommended action — they scanned this
   outlet's QR). Choose Another = secondary white outline. */
.pb-nav-outlet-modal__btn--order { background: #cb333b; color: #fff; }
.pb-nav-outlet-modal__btn--order:hover  { background: #8b0c12; color: #fff; }
.pb-nav-outlet-modal__btn--alt   { background: #fff;    color: #cb333b; }
.pb-nav-outlet-modal__btn--alt:hover    { background: #cb333b; color: #fff; }

@media (max-width: 480px) {
    .pb-nav-outlet-modal__card { padding: 20px 16px; }
    .pb-nav-outlet-modal__image { height: 140px; }
    .pb-nav-outlet-modal__actions { gap: 8px; }
    .pb-nav-outlet-modal__btn { width: 100%; }
}

/* Defensive specificity overrides (same trap as .pb-dine-modal). The
   helixultimate template's `.sp-module ul > li > a { color: #252525 }` would
   otherwise stomp the brand red/white on the Order Now anchor. Re-asserting
   under the #pbNavOutletModal id lifts specificity to (1,1,1+). */
#pbNavOutletModal .pb-nav-outlet-modal__btn--order        { color: #fff;    background: #cb333b; }
#pbNavOutletModal .pb-nav-outlet-modal__btn--order:hover  { color: #fff;    background: #8b0c12; }
#pbNavOutletModal .pb-nav-outlet-modal__btn--order:active { color: #fff;    background: #8b0c12; }
#pbNavOutletModal .pb-nav-outlet-modal__btn--alt          { color: #cb333b; background: #fff; }
#pbNavOutletModal .pb-nav-outlet-modal__btn--alt:hover    { color: #fff;    background: #cb333b; }
#pbNavOutletModal .pb-nav-outlet-modal__btn--alt:active   { color: #fff;    background: #cb333b; }
#pbNavOutletModal .pb-nav-outlet-modal__name              { color: #cb333b; }

/* ===== Tier 2 silver theme (html.pb-tier-2) — top nav #cb333b -> dark grey =====
   Co-located so it matches the #pbNav / #pbMtcn id specificity. Inert unless the
   member page sets html.pb-tier-2 (tier-2 member, or preview via /rewards/me?tier=2).
   The MOBILE top nav is the separate #pbMtcn component, so it needs its own
   overrides. The member row (logo + points + notification) is intentionally NOT
   themed here — see the note lower in this <style> block. */
html.pb-tier-2 #pbNav .pb-nav__links .pb-nav__item a:hover,
html.pb-tier-2 #pbNav .pb-nav__links .pb-nav__item.is-active a { color: #6f6f6f; }
html.pb-tier-2 #pbNav .pb-nav__rewards-btn a,
html.pb-tier-2 #pbNav .pb-nav__order .pb-nav__dropdown-toggle { background: #6f6f6f; }
html.pb-tier-2 #pbNav .pb-nav__rewards-btn a:hover,
html.pb-tier-2 #pbNav .pb-nav__rewards-btn.is-active a,
html.pb-tier-2 #pbNav .pb-nav__order .pb-nav__dropdown-toggle:hover,
html.pb-tier-2 #pbNav .pb-nav__item--has-dropdown:hover .pb-nav__dropdown-toggle,
html.pb-tier-2 #pbNav .pb-nav__item--has-dropdown.is-open .pb-nav__dropdown-toggle { background: #5a5a5a; }
html.pb-tier-2 #pbNav .pb-nav__dropdown li a { color: #6f6f6f; }
html.pb-tier-2 #pbNav .pb-nav__dropdown li a:hover { color: #fff; background: #6f6f6f; }
/* Top-nav bar border matches the bottom nav's tier-2 border (#d6d6d6). */
html.pb-tier-2 #pbNav .pb-nav__row { border-color: #d6d6d6; }

/* Mobile top nav (#pbMtcn) */
html.pb-tier-2 #pbMtcn .pb-mtcn__toggle,
html.pb-tier-2 #pbMtcn .pb-mtcn__order-toggle,
html.pb-tier-2 #pbMtcn .pb-mtcn__pulldown a,
html.pb-tier-2 #pbMtcn .pb-mtcn__order-pulldown a { color: #6f6f6f; }
html.pb-tier-2 #pbMtcn .pb-mtcn__pulldown a.pb-mtcn__pulldown-rewards { background: #f1f1f1; }
html.pb-tier-2 #pbMtcn.is-open .pb-mtcn__toggle,
html.pb-tier-2 #pbMtcn.is-order-open .pb-mtcn__order-toggle,
html.pb-tier-2 #pbMtcn .pb-mtcn__toggle:active,
html.pb-tier-2 #pbMtcn .pb-mtcn__order-toggle:active,
html.pb-tier-2 #pbMtcn .pb-mtcn__pulldown a:active,
html.pb-tier-2 #pbMtcn .pb-mtcn__order-pulldown a:active { color: #fff; background: #6f6f6f; }
@media (hover: hover) and (pointer: fine) {
  html.pb-tier-2 #pbMtcn .pb-mtcn__toggle:hover,
  html.pb-tier-2 #pbMtcn .pb-mtcn__order-toggle:hover,
  html.pb-tier-2 #pbMtcn .pb-mtcn__pulldown a:hover,
  html.pb-tier-2 #pbMtcn .pb-mtcn__order-pulldown a:hover { color: #fff; background: #6f6f6f; }
}
/* Burger lines: grey at rest, white when the menu is open/pressed (on the grey bg). */
html.pb-tier-2 #pbMtcn .pb-mtcn__icon span { background: #6f6f6f; }
html.pb-tier-2 #pbMtcn.is-open .pb-mtcn__icon span,
html.pb-tier-2 #pbMtcn .pb-mtcn__toggle:active .pb-mtcn__icon span { background: #fff; }

/* ===== Tier 3 gold theme (html.pb-tier-3) — top nav menu + Order Online =====
   Mirrors the tier-2 silver rules with the gold palette (#7f623b ink, #80633b
   fill, #695131 hover/open). Member row (logo + points + notification) stays
   original here too (no overrides). */
html.pb-tier-3 #pbNav .pb-nav__links .pb-nav__item a:hover,
html.pb-tier-3 #pbNav .pb-nav__links .pb-nav__item.is-active a { color: #7f623b; }
html.pb-tier-3 #pbNav .pb-nav__rewards-btn a,
html.pb-tier-3 #pbNav .pb-nav__order .pb-nav__dropdown-toggle { background: #80633b; }
html.pb-tier-3 #pbNav .pb-nav__rewards-btn a:hover,
html.pb-tier-3 #pbNav .pb-nav__rewards-btn.is-active a,
html.pb-tier-3 #pbNav .pb-nav__order .pb-nav__dropdown-toggle:hover,
html.pb-tier-3 #pbNav .pb-nav__item--has-dropdown:hover .pb-nav__dropdown-toggle,
html.pb-tier-3 #pbNav .pb-nav__item--has-dropdown.is-open .pb-nav__dropdown-toggle { background: #695131; }
html.pb-tier-3 #pbNav .pb-nav__dropdown li a { color: #7f623b; }
html.pb-tier-3 #pbNav .pb-nav__dropdown li a:hover { color: #fff; background: #80633b; }

html.pb-tier-3 #pbMtcn .pb-mtcn__toggle,
html.pb-tier-3 #pbMtcn .pb-mtcn__order-toggle,
html.pb-tier-3 #pbMtcn .pb-mtcn__pulldown a,
html.pb-tier-3 #pbMtcn .pb-mtcn__order-pulldown a { color: #7f623b; }
html.pb-tier-3 #pbMtcn .pb-mtcn__pulldown a.pb-mtcn__pulldown-rewards { background: #ebe9e3; }
html.pb-tier-3 #pbMtcn.is-open .pb-mtcn__toggle,
html.pb-tier-3 #pbMtcn.is-order-open .pb-mtcn__order-toggle,
html.pb-tier-3 #pbMtcn .pb-mtcn__toggle:active,
html.pb-tier-3 #pbMtcn .pb-mtcn__order-toggle:active,
html.pb-tier-3 #pbMtcn .pb-mtcn__pulldown a:active,
html.pb-tier-3 #pbMtcn .pb-mtcn__order-pulldown a:active { color: #fff; background: #80633b; }
@media (hover: hover) and (pointer: fine) {
  html.pb-tier-3 #pbMtcn .pb-mtcn__toggle:hover,
  html.pb-tier-3 #pbMtcn .pb-mtcn__order-toggle:hover,
  html.pb-tier-3 #pbMtcn .pb-mtcn__pulldown a:hover,
  html.pb-tier-3 #pbMtcn .pb-mtcn__order-pulldown a:hover { color: #fff; background: #80633b; }
}
html.pb-tier-3 #pbMtcn .pb-mtcn__icon span { background: #7f623b; }
html.pb-tier-3 #pbMtcn.is-open .pb-mtcn__icon span,
html.pb-tier-3 #pbMtcn .pb-mtcn__toggle:active .pb-mtcn__icon span { background: #fff; }

/* The member row (rewards logo + points + notification icon) intentionally keeps
   its ORIGINAL colours across all tiers — no tier theming here. Only the menu +
   Order Online controls above change per tier. So the points chip, inbox bell,
   notification dot/count and the row border are NOT overridden for pb-tier-2. */