/* ============================================================
   css/desktop.css - loaded after every page's own styles.
   1. Sharper images everywhere
   2. Deal badges and sale prices
   3. Wider, two-column layouts on laptops and desktops
   ============================================================ */

/* 1. Photos were forced to "crisp-edges", which renders scaled photos
      blocky. Smooth scaling looks much clearer for food photography. */
img, .banner-bg-img { image-rendering: auto !important; }
.item-image img, .featured-card img, .pd-main-image, .rec-image, .cart-item-img, .checkout-item-image {
    background: #f7f2ec;
}

/* 2. Deals */
.deal-ribbon {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    background: #dc2626; color: #fff; font-size: .68rem; font-weight: 800;
    padding: 4px 10px; border-radius: 50px; box-shadow: 0 4px 12px rgba(220,38,38,.35);
    max-width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.featured-card .deal-ribbon { top: 10px; right: 10px; }
.old-price { color: #9ca3af; font-size: .78em; font-weight: 600; margin-left: 4px; }
.pd-deal { display: inline-flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pd-deal span { background: #fee2e2; color: #b91c1c; border-radius: 50px; padding: 3px 12px; font-size: .78rem; font-weight: 800; }
.pd-combo { background: #fff8f0; border: 1px dashed #F4971C; border-radius: 12px; padding: 10px 14px; margin: 6px 0 10px; font-size: .85rem; }
.pd-combo b { color: #D4790A; }
.pd-combo ul { margin: 6px 0 0; padding-left: 1.1em; }

/* 3. Desktop layouts */
@media (min-width: 992px) {
    /* Product page: photo on the left, details and options on the right */
    .pd-container { max-width: 1140px; padding: 24px; }
    .pd-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
    .pd-image-section { grid-row: 1 / span 3; position: sticky; top: 80px; }
    .pd-main-image { height: auto; aspect-ratio: 4 / 3; max-height: 560px; }
    .pd-info, .pd-selections { grid-column: 2; }
    .pd-name { font-size: 2rem; }
    .bottom-bar-inner { max-width: 1140px; }
    .rv-section { max-width: none; }

    /* Cart: items on the left, summary stays visible on the right */
    .cart-container { max-width: 1100px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 24px; align-items: start; }
    .cart-container > .cart-header, .cart-container > .cart-empty { grid-column: 1 / -1; }
    .cart-container > .cart-item { grid-column: 1; }
    .cart-container > .cart-summary { grid-column: 2; grid-row: 2 / span 200; position: sticky; top: 90px; margin-top: 0; }
    .cart-item-img { width: 96px; height: 96px; }

    /* Checkout: wider so nothing feels squeezed */
    .checkout-container { max-width: 820px; }
    .checkout-item-image { width: 64px; height: 64px; }

    /* Menu and home cards: a little more room for photos */
    .featured-card { min-width: 300px; }
    .featured-card img { height: 210px; }

    /* Info pages */
    .info-wrap { max-width: 1040px; }
}

@media (min-width: 1400px) {
    .featured-card { min-width: 320px; }
    .featured-card img { height: 230px; }
}

/* Deal cards on the home page: text centred, big faint icon behind it */
.deal-card { display: flex; align-items: center; overflow: hidden; }
.deal-card .featured-info { position: relative; z-index: 1; padding: 22px; }
.deal-card::after { content: "🏷️"; position: absolute; right: -10px; bottom: -18px; font-size: 6rem; opacity: .18; transform: rotate(-15deg); }
.deal-card[href="rewards.php"]::after { content: "🎁"; }
.deal-ribbon { max-width: 85%; }
/* On menu cards the category label fills the top edge, so deals sit bottom-right */
.item-image .deal-ribbon { top: auto; bottom: 12px; right: 12px; z-index: 4; max-width: 60%; }