/* ===================================================================
   SATTVAM — menu page add-on
   -------------------------------------------------------------------
   Load AFTER custom.css.

   This file does NOT restyle the menu. Section backgrounds, the
   .list-menu panel, .dashed-border leaders, .price .amount, section
   titles and typography all come from custom.css and are untouched.

   Everything below is either (a) a component custom.css has no rule
   for — the Chef's Recommendation strip, the notices block — or
   (b) a small spacing fix noted inline.
   =================================================================== */


/* -------------------------------------------------------------------
   1. SPACING FIXES
   custom.css styles .sisf-e-product-inner, but this markup uses
   .sisf-e-product-content directly inside .menu-items, so the dish
   rows have no rhythm of their own. This gives them one.
   ------------------------------------------------------------------- */
.list-menu .menu-items .sisf-e-product-content {
    padding: 18px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
}

.list-menu .menu-items .sisf-e-product-content:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.list-menu .menu-items .sisf-e-product-content:first-child {
    padding-top: 0;
}

.list-menu .menu-items .sisf-e-product-description p {
    margin-bottom: 0;
    line-height: 26px;
    font-size: 15px;
}

/* .section has top padding only in custom.css — the last block on the
   page needs a floor so it doesn't butt into the footer. */
.menu-notices {
    padding-bottom: 60px;
}


/* -------------------------------------------------------------------
   2. GUEST CHOICE NOTE
   ------------------------------------------------------------------- */
.menu-guest-note {
    margin: 40px 0 0;
    text-align: center;
    font-family: var(--heading-font);
    font-size: 22px;
    line-height: 34px;
    letter-spacing: 0.05em;
    color: var(--main-color);
}


/* -------------------------------------------------------------------
   3. CHEF'S RECOMMENDATION
   New component. Sits on the darker panel colour already used by
   .list-menu (#1d2326) so it reads as part of the same family.
   ------------------------------------------------------------------- */
.chef-recommendation {
    background-color: #1d2326;
    padding: 60px 0;
    margin-top: 60px;
}

.chef-recommendation .section-title {
    margin-bottom: 40px;
}

.chef-picks {
    row-gap: 40px;
}

.chef-picks .chef-pick .sisf-e-product-title {
    margin-bottom: 0;
}

.chef-picks .chef-pick .sisf-e-product-title-link {
    font-family: var(--heading-font);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.3em;
}

.chef-picks .chef-pick .sisf-e-product-title-link:hover {
    color: var(--main-color);
}

.chef-picks .chef-pick p {
    color: #9E9E9E;
    font-size: 15px;
    line-height: 26px;
    margin: 14px 0 16px;
}

.chef-picks .chef-pick .price .amount {
    color: var(--main-color);
    font-size: 22px;
    font-weight: 500;
    line-height: 24px;
}

/* a lone recommendation gets the full stage */
.chef-picks.chef-pick-solo {
    max-width: 620px;
    margin-inline: auto;
    text-align: center;
}

.chef-picks.chef-pick-solo .dashed-border::after,
.chef-picks.chef-pick-solo .dashed-border::before {
    display: none;
}

.chef-picks.chef-pick-solo .sisf-e-product-title-link {
    font-size: 34px;
}

.chef-picks.chef-pick-solo .price {
    justify-content: center;
}


/* -------------------------------------------------------------------
   4. NOTICES
   ------------------------------------------------------------------- */
.menu-notices h5 {
    color: var(--white-color);
    margin-bottom: 14px;
}

.menu-notices p {
    color: #9E9E9E;
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 0;
}


/* -------------------------------------------------------------------
   5. RESPONSIVE
   Matches the 991px breakpoint custom.css already uses for .list-menu.
   ------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {
    .chef-recommendation {
        padding: 40px 0;
        margin-top: 40px;
    }

    .chef-picks .chef-pick .sisf-e-product-title-link {
        font-size: 18px;
    }

    .chef-picks.chef-pick-solo .sisf-e-product-title-link {
        font-size: 24px;
    }

    .chef-picks .chef-pick .price .amount {
        font-size: 16px;
    }

    .menu-guest-note {
        font-size: 18px;
        line-height: 28px;
        margin-top: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .menu-notices .col-md-4 + .col-md-4 {
        margin-top: 30px;
    }
}