/* Round 50 — wallpaper in the X-marked BACKGROUND surfaces only. */
:root { --kaya-wallpaper-mint: #dcefe0; }
html, html body {
  background-color:var(--kaya-wallpaper-mint)!important;
  background-image:url("assets/minimal_mint_pawprint_wallpaper.png")!important;
  background-position:center top!important;
  background-size: min(100vw, 1100px) auto!important;
  background-repeat:repeat-y!important;
  background-attachment:scroll!important;
}
/* X on green margins alongside the hero: change the surrounding surface,
   not the protected hero artwork itself or its content. */
html body main#top > section.hero-scroll {
  background-color:var(--kaya-wallpaper-mint)!important;
  background-image:url("assets/minimal_mint_pawprint_wallpaper.png")!important;
  background-position:center center!important;
  background-size:cover!important;
}
/* X inside About Us frame, on the cutlery display's empty space,
   and the blank right-hand side of Location. Existing foreground stays above. */
html body main#top > section#about.about-section,
html body main#top > section.cutlery-section,
html body main#top > section#contact.location-section {
  background-color:var(--kaya-wallpaper-mint)!important;
  background-image:url("assets/minimal_mint_pawprint_wallpaper.png")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
/* Order Your Way is an opaque cream card. Keep it opaque: the X is in the
   surrounding page gutter, which now displays the wallpaper from body. */
/* Preserve layout from Round 49; keep wallpaper visible in outside gutters. */
html body main#top > section:not(.hero-scroll),
html body main#top > .mobile-menu-jump-slot,
html body footer.site-footer {margin-left:16px!important;margin-right:16px!important;}
html body main#top > section:not(.hero-scroll){width:calc(100% - 32px)!important;max-width:none!important;border-radius:24px!important;margin-top:16px!important;margin-bottom:16px!important;overflow:visible;}
html body footer.site-footer{width:calc(100% - 32px)!important;border-radius:24px!important;margin-top:16px!important;margin-bottom:16px!important;}
@media(max-width:680px){
 html body{background-size:100vw auto!important;}
 html body main#top > section:not(.hero-scroll),html body main#top > .mobile-menu-jump-slot,html body footer.site-footer{margin-left:8px!important;margin-right:8px!important;}
 html body main#top > section:not(.hero-scroll),html body footer.site-footer{width:calc(100% - 16px)!important;border-radius:18px!important;margin-top:8px!important;margin-bottom:8px!important;}
}

/* Round 51: fill the remaining X-marked empty section backgrounds.
   Keep product cards, buttons, photos and their data bindings unchanged. */
html body main#top > section#order-your-way.order-way-section,
html body main#top > section#menu.menu-section,
html body main#top > section#cheesecake.menu-section {
  background-color:#dcefe0!important;
  background-image:url("assets/minimal_mint_pawprint_wallpaper.png")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
/* Keep the image visible in unoccupied portions while card surfaces stay solid. */
html body main#top > section#order-your-way > .order-way-card,
html body main#top > section#menu .product-card,
html body main#top > section#cheesecake .cheesecake-card {
  background-image:none!important;
}

/* Round 52 — remove cream/white strips between the existing framed sections.
   Paint only the page canvas; never alter any section content or hero artwork. */
html body main#top {
  background-color:var(--kaya-wallpaper-mint)!important;
  background-image:url("assets/minimal_mint_pawprint_wallpaper.png")!important;
  background-size:min(100vw, 1100px) auto!important;
  background-position:center top!important;
  background-repeat:repeat-y!important;
}
@media(max-width:680px){html body main#top{background-size:100vw auto!important;}}

/* ROUND 53 — elevated boutique frames for both menus, with strong category contrast.
   Visual-only: existing cards, product image sources, and click handlers are untouched. */
html body main#top > section#menu.menu-section,
html body main#top > section#cheesecake.menu-section {
  position:relative!important;
  isolation:isolate!important;
  border:2px solid #1b7654!important;
  border-radius:30px!important;
  box-shadow:0 15px 0 rgba(16,83,57,.13),0 28px 48px rgba(9,66,45,.19)!important;
  padding:clamp(24px,3.2vw,46px)!important;
}
/* Toast is a premium ivory frame, visibly raised from the mint wallpaper. */
html body main#top > section#menu.menu-section {
  background:#fff9eb!important;
  background-image:linear-gradient(145deg,rgba(255,253,246,.97),rgba(249,240,219,.97))!important;
}
/* Cheesecake gets a contrasting soft sage-cream frame. */
html body main#top > section#cheesecake.menu-section {
  background:#eef6e9!important;
  background-image:linear-gradient(145deg,rgba(248,253,244,.97),rgba(223,239,222,.97))!important;
}
html body main#top > section#menu .section-head,
html body main#top > section#cheesecake .section-head {
  padding:16px 20px!important;
  border-radius:18px!important;
  margin-bottom:26px!important;
  border:1px solid rgba(26,104,73,.24)!important;
  box-shadow:0 5px 18px rgba(13,71,48,.07)!important;
}
html body main#top > section#menu .section-head {background:#e5f1e3!important;}
html body main#top > section#cheesecake .section-head {background:#fff7e7!important;}
/* Menu category navigation: two clear, contrasting clickable tabs. */
html body main#top .mobile-menu-jump {
  background:#fff9ed!important; border:1px solid #8fbba1!important;
  box-shadow:0 9px 22px rgba(10,73,48,.12)!important;
  border-radius:18px!important; padding:6px!important;
}
html body main#top .mobile-menu-jump a {
  background:#e7f2e9!important; color:#1b6247!important;
  border:1px solid #c5dfcc!important; border-radius:13px!important;
  font-weight:900!important; transition:background .2s,box-shadow .2s,transform .2s!important;
}
html body main#top .mobile-menu-jump a.active,
html body main#top .mobile-menu-jump a[aria-current="true"] {
  background:#08643f!important; color:#fff!important; border-color:#08643f!important;
  box-shadow:0 6px 15px rgba(8,100,63,.22)!important;
}
html body main#top .mobile-menu-jump a:hover {transform:translateY(-1px)!important;}
@media(max-width:680px){
 html body main#top > section#menu.menu-section,html body main#top > section#cheesecake.menu-section{border-radius:21px!important;box-shadow:0 8px 0 rgba(16,83,57,.12),0 16px 30px rgba(9,66,45,.13)!important;}
 html body main#top > section#menu .section-head,html body main#top > section#cheesecake .section-head{padding:13px!important;}
}


/* ROUND 54 — unified premium menu palette + exact customer-provided card wallpaper.
   Presentation only: no changes to menu data, cart, product photos, or handlers. */
html body main#top > section#menu.menu-section,
html body main#top > section#cheesecake.menu-section {
  background:#fffaf0!important;
  background-image:linear-gradient(145deg,#fffdf6 0%,#f7f0e0 100%)!important;
  border:2px solid #19734f!important;
  box-shadow:0 12px 0 rgba(15,85,55,.13),0 25px 48px rgba(12,69,46,.19)!important;
}
/* Matching category treatment: neither tab uses a different fill.
   Active state is identified by an underline and a small inset ring. */
html body main#top .mobile-menu-jump {background:#fffaf0!important;border-color:#9cbba6!important;}
html body main#top .mobile-menu-jump a,
html body main#top .mobile-menu-jump a.active,
html body main#top .mobile-menu-jump a[aria-current="true"] {
  background:#e5f1e7!important;
  color:#105638!important;
  border:1px solid #c6dccd!important;
  box-shadow:none!important;
  position:relative!important;
}
html body main#top .mobile-menu-jump a.active::after,
html body main#top .mobile-menu-jump a[aria-current="true"]::after {
  content:"";position:absolute;bottom:4px;left:18%;right:18%;height:3px;
  border-radius:3px;background:#087a4b;pointer-events:none;
}
/* A boutique framed header for Toast, coordinated with Cheesecake. */
html body main#top > section#menu .section-head,
html body main#top > section#cheesecake .section-head {
  background:#e8f2e7!important;
  border:1px solid #b3d1b9!important;
  border-bottom:4px solid #157b50!important;
  box-shadow:0 8px 20px rgba(20,91,59,.10)!important;
  padding:clamp(18px,2.3vw,30px)!important;
  border-radius:20px!important;
}
html body main#top > section#menu .section-head h2,
html body main#top > section#cheesecake .section-head h2 {color:#104a33!important;letter-spacing:-.045em!important;}
/* Exact supplied picture 2 replaces the flat white card surface.
   Image is beneath card contents and product photographs, never over them. */
html body main#top > section#menu .product-card,
html body main#top > section#cheesecake .cheesecake-card {
  background-color:#fffef9!important;
  background-image:url("assets/KAYA_Whole_Page_Background(2).png")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  border:1px solid #b7d4bf!important;
  box-shadow:0 10px 25px rgba(13,76,48,.11)!important;
  border-radius:22px!important;
}
html body main#top > section#menu .product-card:hover,
html body main#top > section#cheesecake .cheesecake-card:hover {
  box-shadow:0 18px 38px rgba(13,76,48,.20)!important;
  transform:translateY(-5px)!important;
}
/* Ensure all text and existing interactive elements remain above decorative paint. */
html body main#top > section#menu .product-card > *,
html body main#top > section#cheesecake .cheesecake-card > * {position:relative;z-index:1;}
@media(max-width:680px){
 html body main#top > section#menu .section-head,
 html body main#top > section#cheesecake .section-head {padding:16px!important;}
}

/* ROUND 55 — user-marked X areas: artwork on BOTH menu frame backgrounds,
   behind cards, rather than printed on the cards themselves. */
html body main#top > section#menu.menu-section,
html body main#top > section#cheesecake.menu-section {
  background-color:#fffdf7!important;
  background-image:url("assets/KAYA_Whole_Page_Background(3).png")!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  background-position:center center!important;
}
/* Product content remains on opaque, readable surfaces. */
html body main#top > section#menu .product-card,
html body main#top > section#cheesecake .cheesecake-card {
  background-color:#fffefb!important;
  background-image:none!important;
}
@media(max-width:680px){
  html body main#top > section#menu.menu-section,
  html body main#top > section#cheesecake.menu-section {
    background-size:cover!important;
  }
}

/* Round 100: repeat the SAME original KAYA wallpaper into desktop side gutters.
   The old repeat-y left plain mint areas outside the centered 1100px image.
   Do not change the centered About frame or its content. */
html, html body, html body main#top {
  background-image: url("assets/minimal_mint_pawprint_wallpaper.png") !important;
  background-color: #dcefe0 !important;
  background-position: center top !important;
  background-size: min(100vw, 1100px) auto !important;
  background-repeat: repeat !important;
}
@media (max-width:680px) {
  html, html body, html body main#top { background-size:100vw auto !important; }
}

/* Round 105: override Round 50's forced 16px side margins on the category bar.
   Centre the entire Toast/Cheesecake switcher in the viewport, not just its labels. */
@media screen {
  html body main#top > .mobile-menu-jump-slot {
    box-sizing:border-box!important;
    width:min(820px, calc(100% - 32px))!important;
    max-width:820px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    margin-top:22px!important;
    margin-bottom:16px!important;
    float:none!important;
  }
  html body main#top > .mobile-menu-jump-slot > .mobile-menu-jump {
    width:100%!important;
    box-sizing:border-box!important;
  }
}
@media screen and (max-width:680px) {
  html body main#top > .mobile-menu-jump-slot {
    width:calc(100% - 24px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}