/* Complete menu only: reference layout, using the existing brand and controls. */
body.home-preview-body.hp-menu-page {background:#fff;}
.hp-menu-page .hp-shell {width:min(1240px,calc(100% - 64px));}
.hp-menu-banner {background:linear-gradient(110deg,#650616,#a51d28);color:#fff;padding:26px 0 30px;}
.hp-menu-banner-grid {display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:center;}
.hp-menu-home {display:inline-block;color:#fff;font-size:.8rem;margin-bottom:18px;text-underline-offset:3px;}
.hp-menu-home:hover {color:#fff4bd;}
.hp-menu-banner h1 {font-size:clamp(2rem,3.5vw,2.9rem);line-height:1.2;font-weight:900;margin:10px 0;}
.hp-menu-banner p {max-width:700px;font-size:.92rem;line-height:1.6;margin-bottom:16px;}
.hp-menu-banner .hp-eyebrow {font-size:.72rem;letter-spacing:.16em;margin-bottom:4px;}
.hp-menu-banner .hp-menu-source {font-weight:700;margin-bottom:6px;}
.hp-menu-actions {display:flex;align-items:center;flex-wrap:wrap;gap:18px;}
.hp-menu-actions>a {color:white;font-size:.85rem;text-underline-offset:3px;}
.hp-menu-search {position:relative;}
.hp-menu-search>i {position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#ab1f26;}
.hp-menu-page #hpMenuSearch {border-radius:30px;background:#fff;min-height:46px;padding:11px 18px 11px 42px;font-size:.88rem;width:100%;border:1px solid #edd7c3;}
.hp-menu-category-band {position:sticky;top:0;z-index:15;background:#fff;border-bottom:1px solid #eed9c9;}
.hp-menu-page .hp-category-controls {position:static;background:white;border:0;gap:10px;}
.hp-menu-page .hp-category-controls .hp-menu-nav {padding:10px 0;gap:8px;scrollbar-width:none;}
.hp-menu-page .hp-menu-nav::-webkit-scrollbar {display:none;}
.hp-menu-page .hp-category-controls a {border:1px solid #ecd0b3;border-radius:24px;padding:10px 14px;color:#ab1f26;font-size:.78rem;font-weight:800;text-decoration:none;}
.hp-menu-page .hp-category-controls a[aria-current] {background:#ab1f26;border-color:#ab1f26;color:white;}
.hp-menu-page .hp-category-controls button {border:0;border-radius:50%;background:#ab1f26;color:white;flex-basis:36px;height:36px;line-height:1;}
.hp-menu-sections {padding-top:30px;padding-bottom:48px;}
.hp-menu-page .hp-category {padding:28px 0;scroll-margin-top:76px;}
.hp-menu-section-heading {padding-bottom:12px;margin-bottom:22px;border-bottom:1px solid #edd5c3;}
.hp-menu-section-heading .hp-eyebrow {color:#ab1f26;margin-bottom:14px;}
.hp-menu-section-heading>div {display:flex;justify-content:space-between;align-items:center;gap:16px;}
.hp-menu-section-heading h2 {font-size:clamp(1.6rem,2.7vw,2.3rem);font-weight:900;color:#ab1f26;margin:0;}
.hp-menu-section-heading [data-menu-count] {font-size:.75rem;color:#70544b;font-weight:750;white-space:nowrap;}
.hp-menu-page .hp-product-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
.hp-menu-page .hp-product {border:1px solid #eedfcd;border-radius:18px;background:#fff;box-shadow:0 6px 20px #4b160908;}
.hp-menu-product-image {position:relative;background:linear-gradient(135deg,#fff9ef,#fff0d2);}
.hp-menu-page .hp-product img {aspect-ratio:1/1;height:auto;max-height:none;object-fit:contain;padding:16px;}
.hp-menu-popular {position:absolute;top:12px;right:12px;background:#fff;color:#ab1f26;border-radius:20px;font-weight:750;font-size:.7rem;padding:6px 9px;}
.hp-menu-page .hp-product-copy {padding:18px;}
.hp-menu-page .hp-product h3 {font-size:1.08rem;color:#941622;font-weight:850;}
.hp-menu-page .hp-product p {font-size:.83rem;line-height:1.6;}
.hp-menu-product-bottom {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
.hp-menu-product-bottom>strong {color:#8d1520;white-space:nowrap;}
.hp-menu-page .hp-product-action {border:0;padding:0;margin:0;gap:8px;font-size:.75rem;}
.hp-menu-page .hp-product-action i {display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:#ab1f26;color:#fff;border-radius:50%;}
@media(max-width:991px){.hp-menu-page .hp-shell{width:calc(100% - 40px)}.hp-menu-banner-grid{grid-template-columns:minmax(0,1fr) 260px;gap:24px}.hp-menu-page .hp-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}}
@media(max-width:767px){.hp-menu-banner-grid{grid-template-columns:1fr;gap:22px}.hp-menu-banner{padding:22px 0}.hp-menu-home{margin-bottom:14px}.hp-menu-actions{gap:14px}.hp-menu-page .hp-category-controls{margin:0 auto}.hp-menu-sections{padding-top:8px}.hp-menu-page .hp-category{padding-top:24px}.hp-menu-page .hp-product-grid{grid-template-columns:1fr}.hp-menu-page .hp-product img{aspect-ratio:4/3;max-height:320px}.hp-menu-page .hp-product-copy{padding:18px}.hp-menu-page .hp-product h3{font-size:1.15rem}.hp-menu-page .hp-product p{font-size:.88rem}}

/* Compact cover: copy above, ordering and search aligned in the same row. */
.hp-menu-banner {padding:18px 0 20px;}
.hp-menu-banner-grid {grid-template-columns:minmax(0,1fr) 300px;column-gap:28px;row-gap:12px;align-items:center;}
.hp-menu-banner-copy {grid-column:1 / -1;}
.hp-menu-banner h1 {margin:5px 0 8px;}
.hp-menu-banner-copy>p:last-child {margin-bottom:0;max-width:800px;}
.hp-menu-banner .hp-eyebrow {margin-bottom:0;}
.hp-menu-banner-grid>.hp-menu-actions {grid-column:1;grid-row:2;}
.hp-menu-banner-grid>.hp-menu-search {grid-column:2;grid-row:2;align-self:center;}
.hp-menu-back-button {display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;}
.hp-menu-page .hp-category-controls button {display:inline-flex;align-items:center;justify-content:center;padding:0;width:36px;min-width:36px;height:36px;line-height:1;}
.hp-menu-page .hp-category-controls button svg {display:block;flex-shrink:0;}
@media(max-width:991px){.hp-menu-banner-grid{grid-template-columns:minmax(0,1fr) 260px;column-gap:20px}}
@media(max-width:767px){
    .hp-menu-banner {padding:16px 0;}
    .hp-menu-banner-grid {grid-template-columns:1fr;gap:12px;}
    .hp-menu-banner-grid>.hp-menu-actions {grid-column:1;grid-row:2;}
    .hp-menu-banner-grid>.hp-menu-search {grid-column:1;grid-row:3;}
    .hp-menu-back-button {margin-top:16px;}
}

@media (max-width: 767px) {
    /* Hide the preview menu arrows. */
    .hp-menu-page .hp-category-controls > button[data-category-scroll] {
        display: none;
    }

    /* Remove the arrows' reserved space and side margins. */
    .hp-menu-page .hp-shell.hp-category-controls {
        display: flex;
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        gap: 0;
    }

    /* Keep categories swipeable across the full width. */
    .hp-menu-page .hp-category-controls #hpCategoryRail {
        display: flex;
        flex: 1;
        min-width: 0;
        width: 100%;
        /*margin: 0;*/
        margin-left: 8px;
        padding: 10px 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .hp-menu-page #hpCategoryRail > a {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .hp-menu-page #hpCategoryRail::-webkit-scrollbar {
        display: none;
    }
}


@media (max-width: 767px) {
    .hp-menu-page .hp-menu-banner {
        padding: 12px 0;
    }

    .hp-menu-page .hp-menu-banner-grid {
        gap: 10px;
    }

    /* Compact title. */
    .hp-menu-page .hp-menu-banner .hp-eyebrow {
        display: none;
    }

    .hp-menu-page .hp-menu-banner h1 {
        font-size: 1.45rem;
        line-height: 1.2;
        margin: 0;
    }

    /* Hide the long introduction on mobile. */
    .hp-menu-page .hp-menu-banner-copy > p:last-child {
        display: none;
    }

    /* Keep ordering and allergen information together. */
    .hp-menu-page .hp-menu-actions {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .hp-menu-page .hp-menu-actions .brand-action {
        flex: 1;
        min-width: 0;
        padding: 10px 12px;
        font-size: .82rem;
        line-height: 1.25;
    }

    .hp-menu-page .hp-menu-actions > a {
        flex: 0 0 auto;
        font-size: .72rem;
        white-space: nowrap;
    }

    .hp-menu-page #hpMenuSearch {
        min-height: 42px;
        padding-top: 9px;
        padding-bottom: 9px;
        font-size: .85rem;
    }
}


@media (max-width: 767px) {
    .hp-menu-page .hp-product-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .hp-menu-page .hp-product {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 110px;
        grid-template-rows: auto auto 1fr;
        gap: 6px 12px;
        padding: 14px;
        border-radius: 14px;
        align-items: start;
    }

    /* Let the existing content participate in the card grid. */
    .hp-menu-page .hp-product-copy,
    .hp-menu-page .hp-menu-product-bottom {
        display: contents;
    }

    .hp-menu-page .hp-product h3 {
        grid-column: 1;
        grid-row: 1;
        margin: 0;
        font-size: 1rem;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    .hp-menu-page .hp-menu-product-bottom > strong {
        grid-column: 1;
        grid-row: 2;
        font-size: .95rem;
        line-height: 1.4;
    }

    .hp-menu-page .hp-product-copy > p {
        grid-column: 1;
        grid-row: 3;
        margin: 0;
        font-size: .78rem;
        line-height: 1.45;
        overflow-wrap: anywhere;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .hp-menu-page .hp-menu-product-image {
        grid-column: 2;
        grid-row: 1 / 3;
        width: 110px;
        height: 90px;
        border-radius: 10px;
        overflow: hidden;
    }

    .hp-menu-page .hp-product .hp-menu-product-image img {
        display: block;
        width: 100%;
        height: 100%;
        max-height: none;
        aspect-ratio: auto;
        object-fit: contain;
        padding: 5px;
    }

    .hp-menu-page .hp-product-action {
        grid-column: 2;
        grid-row: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 36px;
        margin: 0;
        padding: 0;
        font-size: .7rem;
        white-space: nowrap;
        align-self: start;
    }

    .hp-menu-page .hp-product-action i {
        width: 24px;
        height: 24px;
        font-size: .75rem;
    }

    .hp-menu-page .hp-menu-popular {
        top: 4px;
        right: 4px;
        padding: 3px 5px;
        font-size: .55rem;
    }
}

@media (max-width: 767px) {
    .hp-menu-page .hp-product {
        position: relative;
        grid-template-rows: auto;
        min-height: 154px;
    }

    .hp-menu-page .hp-product-copy {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0;
        min-width: 0;
    }

    .hp-menu-page .hp-product h3 {
        order: 0;
        margin: 0;
        line-height: 1.2;
    }

    .hp-menu-page .hp-menu-product-bottom > strong {
        order: 1;
        margin: 0;
        line-height: 1.2;
    }

    .hp-menu-page .hp-product-copy > p {
        order: 2;
        margin: 0;
        line-height: 1.35;
    }

    .hp-menu-page .hp-menu-product-image {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 36px;
    }

    .hp-menu-page .hp-product-action {
        position: absolute;
        top: 108px;
        right: 14px;
        width: 110px;
    }
}


@media (max-width: 767px) {
    /* Hide the repeated “Maeme’s Piri Piri menu” text. */
    .hp-menu-page .hp-menu-section-heading > .hp-eyebrow {
        display: none;
    }

    .hp-menu-page .hp-menu-back-button {
        margin: 8px 0 0;
        padding: 6px 12px;
        min-height: 0;
        font-size: .75rem;
        line-height: 1.3;
        gap: 5px;
    }

    /* Reduce space between the back button and first category. */
    .hp-menu-page .hp-menu-back-button + .hp-category {
        padding-top: 12px;
    }

    .hp-menu-page .hp-menu-section-heading {
        padding-bottom: 8px;
        margin-bottom: 12px;
    }
}

/* Desktop preview menu: compact header, cover and category spacing. */
@media (min-width: 768px) {
    .home-preview-body.hp-menu-page .entry-header .container-xxl {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .hp-menu-page .hp-menu-banner {
        padding: 14px 0 16px;
    }

    .hp-menu-page .hp-menu-banner-grid {
        row-gap: 10px;
    }

    .hp-menu-page .hp-menu-banner h1 {
        font-size: clamp(1.8rem, 2.8vw, 2.4rem);
        line-height: 1.2;
        margin: 4px 0 6px;
    }

    .hp-menu-page .hp-menu-banner-copy > p:last-child {
        line-height: 1.45;
    }

    .hp-menu-page .hp-menu-actions .brand-action {
        padding: 10px 20px;
        min-height: 44px;
        line-height: 1.4;
    }

    .hp-menu-page .hp-category-controls .hp-menu-nav {
        padding: 8px 0;
    }

    .hp-menu-page .hp-category-controls a {
        padding: 8px 12px;
    }

    .hp-menu-page .hp-menu-sections {
        padding-top: 16px;
    }

    .hp-menu-page .hp-menu-back-button {
        margin: 0;
        padding: 7px 16px;
        min-height: 0;
        font-size: .85rem;
        line-height: 1.4;
    }

    .hp-menu-page .hp-category {
        padding: 18px 0;
    }

    .hp-menu-page .hp-menu-section-heading {
        padding-bottom: 10px;
        margin-bottom: 16px;
    }

    .hp-menu-page .hp-menu-section-heading h2 {
        font-size: clamp(1.6rem, 2.2vw, 2rem);
        line-height: 1.2;
    }
}


/* Preserve the desktop button layout. */
.hp-menu-page .hp-product-action-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 767px) {
    .hp-menu-page .hp-linked-product {
        position: relative;
    }

    /* Let the link's clickable overlay cover the card. */
    .hp-menu-page .hp-linked-product .hp-product-action {
        display: contents;
        position: static;
    }

    .hp-menu-page .hp-linked-product .hp-product-action::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        border-radius: inherit;
        cursor: pointer;
    }

    /* Keep the visible label below the image. */
    .hp-menu-page .hp-product-action-label {
        position: absolute;
        top: 108px;
        right: 14px;
        width: 110px;
        min-height: 36px;
        justify-content: center;
        gap: 5px;
        font-size: .7rem;
        white-space: nowrap;
    }

    .hp-menu-page .hp-product-action:focus-visible::after {
        outline: 2px solid #cb982f;
        outline-offset: 3px;
    }
}