/* ============================================================
   New desktop layout (inc/extras/11-desktop.php)
   Only when html.rodi-dk is set (switched on, window 783px+: computers,
   tablets, and phones turned sideways). Upright phones are not affected.
   ============================================================ */

@media (min-width: 783px) {

/* ---------- Page width and background ---------- */
html.rodi-dk.rdk-menu body,
html.rodi-dk.rdk-dealspage body { background: #f7f5f2; }

/* ---------- The three columns ---------- */
html.rodi-dk .rdk-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 350px;
    gap: 26px;
    align-items: start;
    max-width: 1380px;
    margin: 22px 0 60px;
    padding: 0 24px;
    box-sizing: border-box;
    /* Full width even inside a theme flex row, grid or narrow page
       container: centred on the window, not on the theme column. */
    width: min(1380px, calc(100vw - 40px)) !important;
    max-width: none !important;
    /* Centred on the window by 41-desktop.js (a left margin). No
       transform here: it would trap the dish pop-up and stop the side
       panels sticking. */
    position: relative;
    min-width: 0;
    flex: 0 0 auto !important;
    grid-column: 1 / -1;
    align-self: stretch;
    float: none;
}
html.rodi-dk .rdk-grid.rdk-no-side { grid-template-columns: 250px minmax(0, 1fr); }
html.rodi-dk .rdk-grid.rdk-no-nav { grid-template-columns: minmax(0, 1fr) 350px; }
html.rodi-dk .rdk-main { min-width: 0; }

/* ---------- Sections down the left ---------- */
html.rodi-dk .rdk-nav {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow: auto;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .06);
}
html.rodi-dk .rdk-nav-h { margin: 4px 10px 10px; font-size: 18px; letter-spacing: 0; text-transform: none; color: #1f1f1f; font-weight: 800; }
html.rodi-dk .rdk-nav a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 14px; margin: 1px 0; border-radius: 12px;
    font-weight: 650; font-size: 15.5px; color: #262626; text-decoration: none;
    transition: background .12s, color .12s;
}
html.rodi-dk .rdk-nav a i { font-style: normal; font-size: 12.5px; font-weight: 700; color: #6b6b6b; background: #f3f3f3; border-radius: 999px; min-width: 24px; padding: 2px 7px; text-align: center; }
html.rodi-dk .rdk-nav a:hover { background: #fbeeee; color: #cf2027; }
html.rodi-dk .rdk-nav a.on { background: #cf2027; color: #fff; box-shadow: 0 4px 12px rgba(207, 32, 39, .25); }
html.rodi-dk .rdk-nav a.on i { color: #cf2027; background: #fff; }

/* ---------- The menu: every section open ---------- */
html.rodi-dk .rdk-main .foodmaster-accordion-item {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 0 30px !important;
    scroll-margin-top: 110px;
}
html.rodi-dk .rdk-main .foodmaster-accordion-header {
    pointer-events: none;
    background: transparent !important;
    padding: 0 0 12px !important;
    border: 0 !important;
    box-shadow: none !important;
}
html.rodi-dk .rdk-main .foodmaster-accordion-title {
    font-size: 26px !important;
    letter-spacing: -.3px;
    color: #1f1f1f !important;
    text-transform: none;
    margin: 0 !important;
}
html.rodi-dk .rdk-main .foodmaster-accordion-icon { display: none !important; }
html.rodi-dk .rdk-main .foodmaster-accordion-header,
html.rodi-dk .rdk-main .foodmaster-accordion-title { border-bottom: 0 !important; }
html.rodi-dk .rdk-main .foodmaster-accordion-products,
html.rodi-dk .rdk-main .wf-template-wrapper { padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; }
html.rodi-dk .rdk-main .foodmaster-accordion-wrapper { gap: 0 !important; }
/* FoodMaster makes the wrapper a 2-column grid with the list inside it,
   which squeezed every dish into the left half. The list is the grid now. */
html.rodi-dk .rdk-main .wf-template-wrapper {
    display: block !important;
    width: 100% !important;
    grid-template-columns: none !important;
}
html.rodi-dk .rdk-main .foodmaster-accordion-content {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* ---------- Dishes as cards, two columns ---------- */
html.rodi-dk .rdk-main .wf-template-products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
html.rodi-dk .rdk-main li.wf-template-product {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 120px;
    grid-template-areas: "title img" "price btn";
    grid-template-rows: 1fr auto;
    row-gap: 10px;
    column-gap: 14px;
    min-height: 138px;
    margin: 0 !important;
    padding: 14px !important;
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s;
    width: auto !important;
    float: none !important;
}
html.rodi-dk .rdk-main li.wf-template-product:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08) !important;
    transform: translateY(-1px);
}
html.rodi-dk .rdk-main li.wf-template-product .product-image {
    grid-area: img;
    width: 120px !important;
    height: 110px !important;
    margin: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    align-self: center;
    background: linear-gradient(135deg, #f3e6da, #e9d4c2);
}
html.rodi-dk .rdk-main li.wf-template-product .product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: transform .25s;
}
/* No zoom on the photo when the mouse is over a dish (16 Oct 2026): only the card lifts a little. */
/* Dishes without a photo: the text takes the whole card. */
html.rodi-dk .rdk-main li.wf-template-product.rdk-noimg {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title title" "price btn";
    min-height: 0;
}
html.rodi-dk .rdk-main li.wf-template-product.rdk-noimg .product-image { display: none !important; }
html.rodi-dk .rdk-main li.wf-template-product.rdk-noimg .product-button .button,
html.rodi-dk .rdk-main li.wf-template-product.rdk-noimg .product-button button,
html.rodi-dk .rdk-main li.wf-template-product.rdk-noimg .product-button a {
    box-shadow: none !important;
    border: 1.5px solid #f0c9c9 !important;
    background: #fff7f7 !important;
}
/* The favourite heart sits beside the dish name. */
html.rodi-dk .rdk-main li.wf-template-product .rodi-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
html.rodi-dk .rdk-main li.wf-template-product .rodi-title-row > span:first-child {
    display: block;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #1f1f1f !important;
    margin-bottom: 4px;
}
html.rodi-dk .rdk-main li.wf-template-product .product-title {
    grid-area: title;
    align-self: start;
    min-width: 0;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}
html.rodi-dk .rdk-main li.wf-template-product .product-title > span:first-child {
    display: block;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    color: #1f1f1f !important;
    margin-bottom: 4px;
}
html.rodi-dk .rdk-main li.wf-template-product .product-short-descr,
html.rodi-dk .rdk-main li.wf-template-product .product-short-descr span {
    color: #6b6b6b !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
}
html.rodi-dk .rdk-main li.wf-template-product .product-short-descr {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 8px !important;
}
html.rodi-dk .rdk-main li.wf-template-product .product-price {
    grid-area: price;
    align-self: end;
    padding: 8px 0 0 !important;
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #cf2027 !important;
    text-align: left !important;
}
html.rodi-dk .rdk-main li.wf-template-product .product-price * { color: inherit !important; }
/* The add button: a round + on the photo. */
/* The button sits under the photo, on the price line, so it never
   covers the dish. */
html.rodi-dk .rdk-main li.wf-template-product .product-button {
    grid-area: btn;
    position: static;
    justify-self: end;
    align-self: center;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
}
html.rodi-dk .rdk-main li.wf-template-product .product-button form { margin: 0 !important; }
html.rodi-dk .rdk-main li.wf-template-product .product-button .button,
html.rodi-dk .rdk-main li.wf-template-product .product-button button,
html.rodi-dk .rdk-main li.wf-template-product .product-button a {
    width: 38px !important;
    height: 38px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #cf2027 !important;
    border: 0 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18) !important;
    font-size: 0 !important;
    line-height: 38px !important;
    text-align: center;
    display: inline-block !important;
    overflow: hidden;
}
html.rodi-dk .rdk-main li.wf-template-product .product-button .button::before,
html.rodi-dk .rdk-main li.wf-template-product .product-button button::before,
html.rodi-dk .rdk-main li.wf-template-product .product-button a::before {
    content: "+";
    font-size: 26px;
    font-weight: 700;
    line-height: 38px;
}
html.rodi-dk .rdk-main li.wf-template-product .product-button .button:hover { background: #cf2027 !important; color: #fff !important; }
html.rodi-dk .rdk-main li.wf-template-product.outofstock,
html.rodi-dk .rdk-main li.wf-template-product.out-of-stock { opacity: .55; }

/* Tags on the cards stay small and on one line. */
html.rodi-dk .rdk-main li.wf-template-product .rodi-offer-tag,
html.rodi-dk .rdk-main li.wf-template-product .rodi-pop-tag { margin-left: 6px; }

/* Search, filters, today's deal and "order again" above the menu. */
html.rodi-dk .rdk-main .rodi-fb { margin: 0 0 16px !important; }
html.rodi-dk .rdk-main #rodi-today-deals,
html.rodi-dk .rdk-main #rodi-again { border-radius: 18px; }

/* ---------- The basket on the right ---------- */
html.rodi-dk .rdk-side {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    scrollbar-width: thin;
}
/* The basket itself is the card, so nothing empty shows around it. */
html.rodi-dk .rdk-side .foodmaster-mini-cart-wrapper {
    position: static !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 1px solid #ececec !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .05) !important;
    background: #fff !important;
    overflow: hidden;
    transform: none !important;
    inset: auto !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-wrapper * { max-height: none; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-content,
html.rodi-dk .rdk-side .widget_shopping_cart_content { height: auto !important; min-height: 0 !important; }
html.rodi-dk .rdk-side .woocommerce-mini-cart__empty-message { padding: 26px 18px !important; margin: 0 !important; text-align: center; color: #6b6b6b; }
html.rodi-dk .rdk-side .rdk-empty { background: #fff; border: 1px solid #ececec; border-radius: 18px; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-header,
html.rodi-dk .rdk-side .sticky-cart-header {
    padding: 16px 18px !important;
    border-bottom: 1px solid #ececec;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-title { font-size: 18px !important; margin: 0 !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-content,
html.rodi-dk .rdk-side .foodmaster-sticky-cart-content { padding: 6px 18px 18px !important; }
/* The pop-up basket, docked open. */
html.rodi-dk .rdk-side .rdk-docked .foodmaster-sticky-cart-bar,
html.rodi-dk .rdk-side .rdk-docked .sticky-cart-close { display: none !important; }
html.rodi-dk .rdk-side .rdk-docked .foodmaster-sticky-cart-content {
    display: block !important;
    position: static !important;
    max-height: none !important;
    box-shadow: none !important;
    transform: none !important;
}
/* A long basket: the dishes scroll inside the box, while the title, the
   totals and Checkout always stay on screen. */
html.rodi-dk .rdk-side { display: flex; flex-direction: column; overflow: visible; }
html.rodi-dk .rdk-side > .foodmaster-mini-cart-wrapper { display: flex !important; flex-direction: column; flex: 0 1 auto; min-height: 0 !important; max-height: calc(100vh - 120px) !important; }
html.rodi-dk .rdk-side > .foodmaster-mini-cart-wrapper > .foodmaster-mini-cart-header { flex: none; }
html.rodi-dk .rdk-side > .foodmaster-mini-cart-wrapper > .foodmaster-mini-cart-content:not([hidden]) { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0 !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-items { flex: 0 1 auto; min-height: 90px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; margin-right: -10px; padding-right: 10px; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-subtotal,
html.rodi-dk .rdk-side .foodmaster-mini-cart-actions { flex: none; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-actions a,
html.rodi-dk .rdk-side .foodmaster-mini-cart-actions .checkout {
    border-radius: 12px !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-actions a.checkout,
html.rodi-dk .rdk-side .foodmaster-mini-cart-actions .checkout-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 52px;
    background: #cf2027 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
}
html.rodi-dk .rdk-side .rdk-empty { display: none; padding: 28px 20px; text-align: center; color: #6b6b6b; }
html.rodi-dk .rdk-side .rdk-empty b { display: block; color: #1f1f1f; font-size: 16px; margin-bottom: 4px; }
html.rodi-dk.rodi-basket-empty .rdk-side .rdk-empty { display: block; }
html.rodi-dk.rodi-basket-empty .rdk-side .rdk-docked { display: none !important; }
/* No floating basket bar or tracker bar fighting with the side basket. */
html.rodi-dk.rdk-menu .foodmaster-mini-cart-wrapper.sticky-cart:not(.rdk-docked) { display: none !important; }
/* FoodMaster's own sidebar column is left empty once the basket has moved
   into the panel on the right, but it still took 300px, so the menu page
   slid sideways on screens up to about 1900px wide. Hidden once the new
   layout (with its basket panel) is built. */
html.rodi-dk.rdk-menu .modern-sidebar { display: none !important; }

/* ============================================================
   DEALS PAGE
   ============================================================ */
html.rodi-dk .rdk-deals { max-width: 1180px; margin: 0 auto; }
html.rodi-dk .rdk-deals .rodi-deals-h { font-size: 26px !important; margin: 30px 0 4px !important; }

/* The week as tabs. */
html.rodi-dk .rdk-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin: 14px 0 16px;
}
html.rodi-dk .rdk-days button {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px; border-radius: 14px; cursor: pointer;
    background: #fff; border: 1px solid #ececec; color: #1f1f1f; font: inherit;
}
html.rodi-dk .rdk-days button b { font-size: 15px; }
html.rodi-dk .rdk-days button small { color: #6b6b6b; font-size: 12px; }
html.rodi-dk .rdk-days button i { font-style: normal; font-size: 12px; font-weight: 700; color: #6b6b6b; }
html.rodi-dk .rdk-days button i.has { color: #2e7d32; }
html.rodi-dk .rdk-days button.past { opacity: .5; }
html.rodi-dk .rdk-days button.today { border-color: #cf2027; }
html.rodi-dk .rdk-days button.on { background: #1f1f1f; border-color: #1f1f1f; color: #fff; opacity: 1; }
html.rodi-dk .rdk-days button.on small { color: #bbb; }
html.rodi-dk .rdk-days button.on i { color: #ffcdd2; }

/* One day at a time, its deals as large cards. */
html.rodi-dk .rdk-deals .rodi-deals-grid { display: block !important; }
html.rodi-dk .rdk-deals .rodi-deal { display: none !important; background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
html.rodi-dk .rdk-deals .rodi-deal.rdk-shown {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
html.rodi-dk .rdk-deals .rodi-deal-day { display: none !important; }
html.rodi-dk .rdk-deals .rodi-deal-empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 40px;
    text-align: center;
    background: #fff;
    border: 1px dashed #e0e0e0;
    border-radius: 20px;
    color: #6b6b6b;
}
html.rodi-dk .rdk-deals .rodi-deal-item {
    display: flex !important;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .04);
    margin: 0 !important;
    padding: 0 !important;
}
html.rodi-dk .rdk-deals .rodi-deal-img {
    position: relative;
    width: 100% !important;
    height: 200px !important;
    border-radius: 0 !important;
    background-color: #f3e6da;
    background-size: cover !important;
    background-position: center !important;
    flex: 0 0 auto !important;
}
html.rodi-dk .rdk-save {
    position: absolute; left: 14px; top: 14px;
    background: #cf2027; color: #fff; font-weight: 900;
    border-radius: 999px; padding: 6px 12px; font-size: 14px;
}
html.rodi-dk .rdk-deals .rodi-deal-info { padding: 16px 18px 18px !important; display: flex; flex-direction: column; flex: 1; }
html.rodi-dk .rdk-deals .rodi-deal-name { font-size: 21px !important; margin: 0 0 4px !important; }
html.rodi-dk .rdk-deals .rodi-deal-note { color: #cf2027 !important; font-weight: 700; margin: 0 0 4px !important; }
html.rodi-dk .rdk-deals .rodi-deal-price { font-size: 26px !important; margin: 8px 0 0 !important; }
html.rodi-dk .rdk-deals .rodi-deal-price strong { font-weight: 900; }
html.rodi-dk .rdk-deals .rodi-deal-price del { font-size: 15px; color: #767676; margin-right: 6px; }
html.rodi-dk .rdk-deals .rodi-deal-hours,
html.rodi-dk .rdk-deals .rodi-deal-timer { font-size: 13px !important; font-weight: 700; margin: 6px 0 0 !important; }
html.rodi-dk .rdk-deals .rodi-deal-timer.is-live { color: #2e7d32; }
html.rodi-dk .rdk-deals .rodi-deal-btn {
    margin-top: auto !important;
    align-self: flex-start;
    display: inline-flex !important;
    align-items: center;
    height: 46px;
    padding: 0 20px !important;
    border-radius: 12px !important;
    background: #cf2027 !important;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
}
html.rodi-dk .rdk-deals .rodi-deal-btn.is-off { background: #eee !important; color: #888 !important; }
html.rodi-dk .rdk-deals .rodi-deal-info > .rodi-deal-btn { margin-top: 16px !important; }

/* Basket deals as cards. */
html.rodi-dk .rdk-deals .rodi-deals-offers { margin-top: 10px; }
html.rodi-dk .rdk-deals .rodi-deals-offers-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
html.rodi-dk .rdk-deals .rodi-deals-offer {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px !important;
    background: #fff !important;
    border: 1px solid #ececec !important;
    border-radius: 20px !important;
    text-decoration: none;
    color: #1f1f1f !important;
    position: relative;
}
html.rodi-dk .rdk-deals .rodi-deals-offer:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .07); }
html.rodi-dk .rdk-deals .rodi-deals-offer.is-chosen { border: 2px solid #cf2027 !important; background: #fffafa !important; }
html.rodi-dk .rdk-deals .rodi-deals-offer-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #cf2027; background: none !important; padding: 0 !important; }
html.rodi-dk .rdk-deals .rodi-deals-offer h3 { margin: 0 !important; font-size: 19px !important; }
html.rodi-dk .rdk-deals .rodi-deals-offer-when { margin: 0 !important; color: #555; font-size: 13.5px; }
html.rodi-dk .rdk-deals .rodi-deals-offer-now { position: absolute; right: 18px; top: 18px; background: #e8f5e9; color: #1b5e20; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; }
html.rodi-dk .rdk-deals .rodi-deals-offer-btn {
    align-self: flex-start;
    margin-top: 6px;
    display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
    border-radius: 12px; background: #cf2027; color: #fff; font-weight: 700;
}
html.rodi-dk .rdk-deals .rodi-deals-offer.is-chosen .rodi-deals-offer-btn { background: #2e7d32; }
html.rodi-dk .rdk-deals .rodi-deals-small { color: #6b6b6b; font-size: 13px; }

}

/* ============================================================
   SCREEN SIZES
   13" laptops are usually 1280 to 1440 wide, 16" are 1536 to 1728,
   and big monitors 1920 and more. The columns give and take so the
   dishes always have room.
   ============================================================ */

/* Smaller laptops (1100 to 1279): the sections become a bar across the
   top of the menu, so the dishes keep two good columns. */
@media (min-width: 783px) and (max-width: 1279px) {
    html.rodi-dk .rdk-grid,
    html.rodi-dk .rdk-grid.rdk-no-nav { grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; padding: 0 18px; }
    html.rodi-dk .rdk-grid.rdk-no-side { grid-template-columns: minmax(0, 1fr); }
    html.rodi-dk .rdk-nav.rdk-nav-bar {
        position: sticky;
        z-index: 15;
        max-height: none;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px;
        margin: 0 0 14px;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    }
    html.rodi-dk .rdk-nav.rdk-nav-bar .rdk-nav-h { display: none; }
    html.rodi-dk .rdk-nav.rdk-nav-bar nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
    html.rodi-dk .rdk-nav.rdk-nav-bar nav::-webkit-scrollbar { display: none; }
    html.rodi-dk .rdk-nav.rdk-nav-bar a { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }
    html.rodi-dk .rdk-nav.rdk-nav-bar a i { display: none; }
    html.rodi-dk .rdk-main { --rdk-photo: 122px; }
    html.rodi-dk .rdk-deals { padding: 0 18px; }
}

/* 13" laptops (1280 to 1499). */
@media (min-width: 1280px) and (max-width: 1499px) {
    html.rodi-dk .rdk-grid { grid-template-columns: 225px minmax(0, 1fr) 320px; gap: 20px; padding: 0 20px; }
    html.rodi-dk .rdk-grid.rdk-no-side { grid-template-columns: 225px minmax(0, 1fr); }
    html.rodi-dk .rdk-grid.rdk-no-nav { grid-template-columns: minmax(0, 1fr) 320px; }
    html.rodi-dk .rdk-nav a { padding: 8px 10px; font-size: 13.5px; }
    html.rodi-dk .rdk-main { --rdk-photo: 132px; }
}

/* Short screens (most 13" laptops are 720 to 800 high): tighter top. */
@media (min-width: 783px) and (max-height: 820px) {
    html.rodi-dk .rdk-grid { margin-top: 14px; }
    html.rodi-dk .rdk-main .foodmaster-accordion-title { font-size: 22px !important; }
    html.rodi-dk .rdk-side .foodmaster-mini-cart-actions a.checkout,
    html.rodi-dk .rdk-side .foodmaster-mini-cart-actions .checkout-button { height: 46px; }
}

/* Big monitors (1700 and wider): a little more room everywhere. */
@media (min-width: 1700px) {
    html.rodi-dk .rdk-grid { width: min(1600px, calc(100vw - 40px)) !important; grid-template-columns: 270px minmax(0, 1fr) 380px; gap: 30px; }
    html.rodi-dk .rdk-grid.rdk-no-side { grid-template-columns: 270px minmax(0, 1fr); }
    html.rodi-dk .rdk-grid.rdk-no-nav { grid-template-columns: minmax(0, 1fr) 380px; }
    html.rodi-dk .rdk-main { --rdk-photo: 172px; }
    html.rodi-dk .rdk-deals { max-width: 1320px; }
}

/* ---------- Quick add (+ adds straight to the basket) ---------- */
@media (min-width: 783px) {
html.rodi-dk .rdk-main li.wf-template-product .product-button .rdk-busy { opacity: .6; pointer-events: none; }
html.rodi-dk .rdk-main li.wf-template-product .rdk-added {
    position: absolute;
    right: 14px;
    bottom: 58px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 999px;
    background: #1f7a3a;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    animation: rdkAdded 1.6s ease forwards;
    pointer-events: none;
    white-space: nowrap;
}
@keyframes rdkAdded {
    0% { opacity: 0; transform: translateY(6px); }
    15% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; }
    100% { opacity: 0; }
}
}

/* Quick-add dishes: a clear "Add" button instead of the round +. */
@media (min-width: 783px) {
html.rodi-dk .rdk-main li.wf-template-product.rdk-quick .product-button .button,
html.rodi-dk .rdk-main li.wf-template-product.rdk-quick .product-button button,
html.rodi-dk .rdk-main li.wf-template-product.rdk-quick .product-button a {
    width: auto !important;
    padding: 0 14px 0 12px !important;
    border-radius: 999px !important;
    background: #cf2027 !important;
    color: #fff !important;
    white-space: nowrap;
}
html.rodi-dk .rdk-main li.wf-template-product.rdk-quick .product-button .button::before,
html.rodi-dk .rdk-main li.wf-template-product.rdk-quick .product-button button::before,
html.rodi-dk .rdk-main li.wf-template-product.rdk-quick .product-button a::before {
    content: "Quick add";
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
}
html.rodi-dk .rdk-main li.wf-template-product.rdk-quick .product-button .button:hover,
html.rodi-dk .rdk-main li.wf-template-product.rdk-quick .product-button button:hover,
html.rodi-dk .rdk-main li.wf-template-product.rdk-quick .product-button a:hover { background: #a9161c !important; }
html.rodi-dk .rdk-main li.wf-template-product .rdk-added.rdk-no { background: #555; }
/* Panels kept in place by script in browsers where sticking fails. */
html.rodi-dk .rdk-pin { position: fixed !important; z-index: 20; margin: 0 !important; box-sizing: border-box !important; }
html.rodi-dk .rdk-ph { visibility: hidden; pointer-events: none; }
}

/* WooCommerce adds a "View basket" link after a dish is added; the basket
   is already on screen, so it is not needed (it showed as a second Add). */
html.rodi-dk .rdk-main li.wf-template-product .product-button a.added_to_cart,
html.rodi-dk .rdk-main li.wf-template-product a.added_to_cart { display: none !important; }

/* ============================================================
   Dish cards, basket and section titles: the polished look
   ============================================================ */
@media (min-width: 783px) {
html.rodi-dk .rdk-main { --rdk-photo: 150px; }

/* Card: text on the left, the photo filling the right-hand side. */
html.rodi-dk .rdk-main li.wf-template-product {
    grid-template-columns: minmax(0, 1fr) auto var(--rdk-photo) !important;
    grid-template-areas: "title title img" "price btn img" !important;
    grid-template-rows: 1fr auto !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    min-height: calc(var(--rdk-photo) * .9) !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #e9e6e2 !important;
    border-radius: 18px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important;
}
html.rodi-dk .rdk-main li.wf-template-product:hover {
    border-color: #e2c9c9 !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .09) !important;
}
html.rodi-dk .rdk-main li.wf-template-product .product-title { padding: 16px 0 0 18px !important; }
html.rodi-dk .rdk-main li.wf-template-product .product-price { padding: 0 0 16px 18px !important; align-self: end; font-size: 17px !important; }
html.rodi-dk .rdk-main li.wf-template-product .product-button { padding: 0 0 12px !important; align-self: end; }
html.rodi-dk .rdk-main li.wf-template-product .product-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 100%;
    align-self: stretch !important;
    border-radius: 0 !important;
    position: relative;
}
/* The photo fills its side without making the card taller. */
html.rodi-dk .rdk-main li.wf-template-product .product-image img {
    position: absolute !important;
    inset: 6px 6px 6px 0;
    width: calc(100% - 6px) !important;
    height: calc(100% - 12px) !important;
    /* Your photos are plates cut out on a clear background: shown whole,
       never cropped. */
    object-fit: contain !important;
}
html.rodi-dk .rdk-main li.wf-template-product .product-image { background: #fff !important; }
/* No zoom on the photo when the mouse is over a dish (16 Oct 2026): only the card lifts a little. */
html.rodi-dk .rdk-main li.wf-template-product .product-title > span:first-child,
html.rodi-dk .rdk-main li.wf-template-product .rodi-title-row > span:first-child {
    font-size: 17px !important;
    line-height: 1.3 !important;
    letter-spacing: -.1px;
}
html.rodi-dk .rdk-main li.wf-template-product .product-short-descr,
html.rodi-dk .rdk-main li.wf-template-product .product-short-descr span { font-size: 14px !important; color: #6a6560 !important; }
/* The favourite heart: a small white circle on the photo's corner. */
html.rodi-dk .rdk-main li.wf-template-product .rodi-heart {
    position: absolute !important;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(255, 255, 255, .95) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
html.rodi-dk .rdk-main li.wf-template-product.rdk-noimg .rodi-heart { position: static !important; box-shadow: none; }
/* No photo: text and button use the whole card. */
html.rodi-dk .rdk-main li.wf-template-product.rdk-noimg {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "title title" "price btn" !important;
    min-height: 0 !important;
}
html.rodi-dk .rdk-main li.wf-template-product.rdk-noimg .product-button { padding-right: 14px !important; }
html.rodi-dk .rdk-main li.wf-template-product .rdk-added { right: calc(var(--rdk-photo) + 12px); bottom: 56px; }
html.rodi-dk .rdk-main li.wf-template-product.rdk-noimg .rdk-added { right: 14px; }

/* Section titles with how many dishes. */
html.rodi-dk .rdk-main .foodmaster-accordion-header {
    display: flex !important;
    align-items: baseline;
    gap: 12px;
    padding: 0 0 14px !important;
    margin: 0 0 16px !important;
    border-bottom: 2px solid #ece8e3 !important;
}
html.rodi-dk .rdk-main .foodmaster-accordion-title {
    font-size: 25px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px;
}
html.rodi-dk .rdk-main .rdk-sec-count { font-size: 14px; font-weight: 600; color: #8a847e; }

/* ---------- The basket ---------- */
html.rodi-dk .rdk-side .foodmaster-mini-cart-header {
    background: #fff !important;
    color: #1f1f1f !important;
    padding: 18px 20px 14px !important;
    border-bottom: 1px solid #efefef !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-title {
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: #1f1f1f !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}
html.rodi-dk .rdk-side .foodmaster-cart-count {
    background: #cf2027 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800;
    border-radius: 999px;
    padding: 2px 9px !important;
    min-width: 24px;
    text-align: center;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-content { padding: 4px 20px 20px !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-items { padding: 0 !important; margin: 0 !important; max-height: none !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-item {
    display: flex !important;
    gap: 10px;
    padding: 14px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .item-thumbnail { display: none !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .item-details { flex: 1; min-width: 0; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .item-name,
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .item-name a {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f1f1f !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    border: 0 !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .item-meta { margin: 4px 0 0 !important; padding: 0 !important; background: none !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .meta-item { display: block !important; font-size: 13px !important; color: #77716b !important; line-height: 1.4; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .meta-key,
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .meta-value { display: inline !important; background: none !important; padding: 0 !important; font-size: 13px !important; color: inherit !important; font-weight: 400 !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .item-price-quantity {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .item-quantity {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    padding: 3px !important;
    background: #f5f3f1 !important;
    border: 0 !important;
    border-radius: 999px !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .quantity-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #cf2027 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12) !important;
    cursor: pointer;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .quantity-btn:hover { background: #cf2027 !important; color: #fff !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .quantity-number { min-width: 26px; text-align: center; font-weight: 700 !important; font-size: 14px !important; color: #1f1f1f !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .item-price,
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .item-price * { font-size: 15px !important; font-weight: 700 !important; color: #1f1f1f !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .item-remove { flex: 0 0 auto; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .remove-item {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #a8a29d !important;
    font-size: 18px !important;
    line-height: 24px !important;
    cursor: pointer;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-item .remove-item:hover { background: #fdecea !important; color: #cf2027 !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-subtotal {
    margin: 12px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-subtotal > div {
    display: flex !important;
    justify-content: space-between;
    padding: 5px 0 !important;
    border: 0 !important;
    font-size: 14.5px !important;
    color: #5c5752 !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-subtotal > div * { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-subtotal .total-row {
    margin-top: 4px;
    padding-top: 10px !important;
    border-top: 1px dashed #e3dfdb !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1f1f1f !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-actions { display: block !important; margin: 16px 0 0 !important; padding: 0 !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-actions .view-cart { display: none !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-actions .checkout {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    box-sizing: border-box !important;
    height: 54px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #cf2027 !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 8px 20px rgba(207, 32, 39, .25) !important;
}
html.rodi-dk .rdk-side .foodmaster-mini-cart-actions .checkout:hover { background: #a9161c !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-empty { padding: 30px 10px 18px !important; text-align: center; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-empty .empty-cart-icon { font-size: 34px !important; opacity: .45; margin-bottom: 8px; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-empty .empty-message { font-size: 15px !important; font-weight: 700 !important; color: #3a3a3a !important; margin: 0 0 4px !important; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-empty .empty-message::after { content: "Add dishes from the menu to start your order."; display: block; margin-top: 4px; font-size: 13.5px; font-weight: 400; color: #8a847e; }
html.rodi-dk .rdk-side .foodmaster-mini-cart-empty .continue-shopping { display: none !important; }
}

/* Menu list: no scroll bar showing (it still scrolls with the mouse wheel
   on very short windows), and tighter rows when the window is short. */
@media (min-width: 783px) {
html.rodi-dk .rdk-nav { scrollbar-width: none; -ms-overflow-style: none; }
html.rodi-dk .rdk-nav::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.rodi-dk .rdk-nav.rdk-compact a { padding-top: 8px; padding-bottom: 8px; font-size: 15px; }
html.rodi-dk .rdk-nav.rdk-compact .rdk-nav-h { margin-bottom: 6px; font-size: 17px; }
html.rodi-dk .rdk-nav.rdk-tight a { padding-top: 6px; padding-bottom: 6px; font-size: 14px; margin: 0; }
html.rodi-dk .rdk-nav.rdk-tight .rdk-nav-h { margin: 2px 10px 4px; font-size: 16px; }
html.rodi-dk .rdk-nav.rdk-tight { padding: 8px 10px; }
}

/* The add buttons never animate their size or position (they used to grow
   from round to "+ Add" in front of the customer, which looked like the page
   sliding). Only the colour changes on hover. */
@media (min-width: 783px) {
html.rodi-dk .rdk-main li.wf-template-product .product-button .button,
html.rodi-dk .rdk-main li.wf-template-product .product-button button,
html.rodi-dk .rdk-main li.wf-template-product .product-button a { transition: background-color .15s, color .15s !important; }
html.rodi-dk .rdk-main .rdk-qwait li.wf-template-product .product-button,
html.rodi-dk .rdk-main.rdk-qwait li.wf-template-product .product-button,
html.rodi-dk .rdk-qwait li.wf-template-product .product-button { visibility: hidden; }
}

/* Phones turned sideways and tablets (783 to 1099): menu and basket side by
   side, the sections as a bar across the top, everything a little smaller. */
@media (min-width: 783px) and (max-width: 1099px) {
    html.rodi-dk .rdk-grid,
    html.rodi-dk .rdk-grid.rdk-no-nav { grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; padding: 0 12px; margin-top: 12px; width: calc(100vw - 16px) !important; }
    html.rodi-dk .rdk-main { --rdk-photo: 104px; }
    html.rodi-dk .rdk-nav.rdk-nav-bar { margin-bottom: 10px; padding: 4px; border-radius: 0 0 14px 14px; box-shadow: 0 -14px 0 #fff, 0 6px 14px rgba(0, 0, 0, .06); }
    /* One plain white page (no beige), so it doesn't look boxed in next to
       the white bars the phone keeps at the sides when turned. */
    html.rodi-dk.rdk-menu body, html.rodi-dk.rdk-dealspage body { background: #fff; }
    html.rodi-dk .rdk-nav.rdk-nav-bar a { padding: 7px 10px; font-size: 13.5px; }
    html.rodi-dk .rdk-main .foodmaster-accordion-title { font-size: 19px !important; }
    html.rodi-dk .rodi-cats { display: none !important; }
    /* The header's round "Order now" button doesn't fit beside the links. */
    html.rodi-dk .order-now-btn { display: none !important; }
}
/* Phones sideways are short: nothing extra stuck to the top of the screen. */
@media (min-width: 783px) and (max-height: 500px) {
    html.rodi-dk .rdk-nav.rdk-nav-bar { box-shadow: 0 -14px 0 #fff; }
    html.rodi-dk .rdk-side .foodmaster-mini-cart-items { max-height: 120px !important; }
}

/* Touch screens (phones turned sideways, tablets): the columns simply fill
   the page width, with no measuring and moving by the script. */
@media (min-width: 783px) {
    /* 100%, not auto: the grid sits in the theme's flex row, where "auto"
       grows to the content (1380px), wider than an iPad turned sideways. */
    html.rodi-dk.rdk-lite .rdk-grid { width: 100% !important; flex: 1 1 100% !important; min-width: 0 !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; }
}


/* ============================================================
   Dish buttons (16 Oct 2026)
   - The round "+" on the photo always opens the dish (sauces, extras,
     notes): 49-dish-plus.js adds it to every dish.
   - "Quick add" on every dish: straight into the basket when there's
     nothing to choose; a dish with something to choose opens instead.
   ============================================================ */
@media (min-width: 783px) {
html.rodi-dk .rdk-main li.wf-template-product .product-button .button,
html.rodi-dk .rdk-main li.wf-template-product .product-button button,
html.rodi-dk .rdk-main li.wf-template-product .product-button a {
    width: auto !important;
    height: 38px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #cf2027 !important;
    color: #fff !important;
    box-shadow: none !important;
    white-space: nowrap;
}
html.rodi-dk .rdk-main li.wf-template-product .product-button .button::before,
html.rodi-dk .rdk-main li.wf-template-product .product-button button::before,
html.rodi-dk .rdk-main li.wf-template-product .product-button a::before {
    content: "Quick add" !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .2px;
    line-height: 38px !important;
}
html.rodi-dk .rdk-main li.wf-template-product .product-button .button:hover,
html.rodi-dk .rdk-main li.wf-template-product .product-button button:hover,
html.rodi-dk .rdk-main li.wf-template-product .product-button a:hover { background: #a9161c !important; color: #fff !important; }
}

/* FoodMaster's own menu style also zooms the photo a little on hover:
   switched off, so the photo stays still. */
html.rodi-dk .rdk-main li.wf-template-product:hover .product-image img,
html.rodi-dk .rdk-main li.wf-template-product .product-image img:hover {
    transform: none !important;
}

/* ============================================================
   Deals page in the menu's layout (16 Oct 2026): days down the
   left, deals in the middle, basket on the right, and the deal
   cards and section headings drawn like the menu's.
   ============================================================ */
@media (min-width: 783px) {

html.rodi-dk.rdk-deals2 .rdk-main .rd2 { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
/* The days: a compact row above the deals (the sections are down the left). */
html.rodi-dk.rdk-deals2 .rdk-main .rd2-days {
    position: static !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
}
html.rodi-dk.rdk-deals2 .rdk-main .rd2-day-b { padding: 8px 4px !important; border-radius: 14px !important; }
/* "Money off your whole order": Basket deals is in the list down the left. */
html.rodi-dk.rdk-deals2 .rdk-main .rd2-head { display: none !important; }
/* Family packages in the list down the left: orange, with the family icon. */
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-fam { color: #8a4b00; background: #fff3e0; margin: 4px 0; }
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-fam span::before { content: ""; display: inline-block; width: 18px; height: 18px; margin: 0 8px -3px 0; background: #e07a00; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='3'/%3E%3Ccircle cx='17' cy='8.5' r='2.5'/%3E%3Cpath d='M2.5 20c0-3.3 2.5-6 5.5-6s5.5 2.7 5.5 6'/%3E%3Cpath d='M14 20c.2-2.6 1.6-4.6 3.5-4.6s3.6 2 3.8 4.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='3'/%3E%3Ccircle cx='17' cy='8.5' r='2.5'/%3E%3Cpath d='M2.5 20c0-3.3 2.5-6 5.5-6s5.5 2.7 5.5 6'/%3E%3Cpath d='M14 20c.2-2.6 1.6-4.6 3.5-4.6s3.6 2 3.8 4.6'/%3E%3C/svg%3E") center / contain no-repeat; }
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-fam:hover { background: #ffe8c7; color: #8a4b00; }
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-fam.on { background: #e07a00; color: #fff; box-shadow: 0 4px 12px rgba(224, 122, 0, .3); }
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-fam.on span::before { background: #fff; }
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-fam.on i { color: #e07a00; }
html.rodi-dk.rdk-deals2 .rdk-main .rodi-fb { margin: 0 0 16px !important; }

/* Days list: name, date under it, number of deals. */
html.rodi-dk .rdk-deals-grid .rdk-nav a span { display: flex; flex-direction: column; line-height: 1.2; }
html.rodi-dk .rdk-deals-grid .rdk-nav a span small { font-size: 12.5px; font-weight: 500; color: #8a8a8a; margin-top: 2px; }
html.rodi-dk .rdk-deals-grid .rdk-nav a.on span small { color: rgba(255, 255, 255, .85); }
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-none { color: #9a9a9a; }
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-none.on { color: #fff; }
html.rodi-dk .rdk-deals-grid .rdk-nav.rdk-nav-bar a span { flex-direction: row; gap: 6px; align-items: baseline; }

html.rodi-dk.rdk-deals2 .rd2-dayh { margin: 0 0 14px !important; }

/* Section headings like the menu's: big name, number on the right, grey line. */
html.rodi-dk.rdk-deals2 .rd2-sec { margin: 0 0 30px !important; }
html.rodi-dk.rdk-deals2 .rd2-sec-h {
    position: relative;
    align-items: baseline;
    margin: 0 0 14px !important;
    padding: 0 90px 12px 0 !important;
    border-bottom: 1px solid #e6e6e6 !important;
}
html.rodi-dk.rdk-deals2 .rd2 .rd2-sec-h h4 { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.3px !important; color: #1f1f1f; }
html.rodi-dk.rdk-deals2 .rd2-sec-h span { font-size: 14px; color: #8a8a8a; }
html.rodi-dk.rdk-deals2 .rd2-sec-h .rdk-sec-count {
    position: absolute; right: 0; bottom: 14px;
    font-style: normal; font-size: 14px; font-weight: 600; color: #8a8a8a;
}

/* Deal cards like the menu's dish cards. */
html.rodi-dk.rdk-deals2 .rd2-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; gap: 14px !important; }
html.rodi-dk.rdk-deals2 .rd2-card {
    grid-template-columns: minmax(0, 1fr) 120px !important;
    column-gap: 14px !important;
    min-height: 138px;
    padding: 14px !important;
    border: 1px solid #ececec !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    background: #fff !important;
}
html.rodi-dk.rdk-deals2 .rd2-card.is-combo,
html.rodi-dk.rdk-deals2 .rd2-card.is-flash { background: #fff !important; }
html.rodi-dk.rdk-deals2 .rd2-card--locked { background: #faf5ff !important; border: 1.5px dashed #d8b4fe !important; }
@media (hover: hover) {
    html.rodi-dk.rdk-deals2 .rd2 .rd2-card.is-tap:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .08) !important;
        border-color: #ececec !important;
    }
}
html.rodi-dk.rdk-deals2 .rd2-img {
    width: 120px !important;
    height: 110px !important;
    aspect-ratio: auto !important;
    align-self: center !important;
    border-radius: 12px !important;
}
html.rodi-dk.rdk-deals2 .rd2-off { top: -8px; left: -8px; min-width: 40px; height: 40px; font-size: 13px; }
html.rodi-dk.rdk-deals2 .rd2 .rd2-name { font-size: 16.5px !important; font-weight: 700 !important; color: #1f1f1f; margin: 0 0 4px !important; }
html.rodi-dk.rdk-deals2 .rd2-note,
html.rodi-dk.rdk-deals2 .rd2-steps {
    font-size: 13.5px !important; line-height: 1.45 !important; color: #6b6b6b !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0 0 8px !important;
}
html.rodi-dk.rdk-deals2 .rd2-tags { margin-bottom: 6px; }
html.rodi-dk.rdk-deals2 .rd2-price { margin: auto 0 8px !important; padding-top: 4px; font-size: 13px; }
html.rodi-dk.rdk-deals2 .rd2-price b { font-size: 16px; font-weight: 700; color: #cf2027; }
html.rodi-dk.rdk-deals2 .rd2-saveamt { font-size: 11.5px; }
/* The button: the same red pill as Quick add on the menu. */
html.rodi-dk.rdk-deals2 .rd2-btn {
    min-height: 38px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 700;
    background: #cf2027;
}
html.rodi-dk.rdk-deals2 .rd2-btn:hover { background: #b71c1c; }
html.rodi-dk.rdk-deals2 .rd2-btn.is-ahead { background: #1f1f1f; }
html.rodi-dk.rdk-deals2 .rd2-timer { font-size: 12px; }

/* Basket deals and the small print: same width as the deals. */
html.rodi-dk.rdk-deals2 .rd2 .rodi-deals-offers { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Deals page: the days sit in the search bar, so they stay at the top
   while scrolling; square tabs with the date and number of deals. */
@media (min-width: 783px) {
html.rodi-dk.rdk-deals2 .rodi-fb .rd2-days.rdk-days-in-bar {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
}
html.rodi-dk.rdk-deals2 .rodi-fb .rdk-days-in-bar .rd2-day-b { padding: 8px 4px !important; border-radius: 14px !important; }
/* "Next: Sat" under a section that isn't on the day shown. */
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-none span small { font-size: 11.5px; }
/* Weekly meals: a separate page, set apart at the bottom. */
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-ext {
    margin-top: 10px;
    padding-top: 13px;
    border-top: 1px solid #eee;
    border-radius: 0 0 12px 12px;
}
html.rodi-dk .rdk-deals-grid .rdk-nav a.rdk-ext b { font-size: 20px; line-height: 1; color: #cf2027; }
}

/* Deals page, desktop: Basket deals headed like the other sections. */
@media (min-width: 783px) {
html.rodi-dk.rdk-deals2 .rd2-basket {
    margin-top: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}
html.rodi-dk.rdk-deals2 .rd2-basket .rodi-deals-h {
    margin: 0 0 6px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid #e6e6e6;
    font-size: 26px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px !important;
    text-transform: uppercase;
    color: #1f1f1f;
}
html.rodi-dk.rdk-deals2 .rd2-basket .rodi-deals-sub { margin: 0 0 14px !important; font-size: 14px; color: #8a8a8a; }
}

/* ============================================================
   Laptops (14" and smaller windows), 16 Oct 2026: the dish name
   (with its heart) spans the card, and narrow cards get a smaller
   photo; very narrow, one card per row. Measured on the list itself,
   so it works whatever the screen size or zoom.
   ============================================================ */
@media (min-width: 783px) {
html.rodi-dk .rdk-main li.wf-template-product > .rodi-title-row { grid-area: title; min-width: 0; }
html.rodi-dk .rdk-main .wf-template-wrapper { container-type: inline-size; }
@container (max-width: 640px) {
    html.rodi-dk .rdk-main .wf-template-products { grid-template-columns: minmax(0, 1fr) !important; }
}
@container (min-width: 641px) and (max-width: 780px) {
    html.rodi-dk .rdk-main li.wf-template-product { --rdk-photo: 112px; }
}
}