/* MSBD 3.5.12.71 — desktop-only, gap-free, ratio-safe three-panel hero.
 * Left slide = 2:1; both right panels together = 1:1, including their gap.
 * Keep phone's independent banners and carousel styling completely untouched. */
.msbd-hero-panels{display:none}
@media(min-width:768px){
 body.home > .msbd-desktop-category-bar{padding-bottom:0!important}
 body .reference-home > section.container.yb-ad-section{
  --msbd-hero-gap:16px;
  display:grid!important;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:var(--msbd-hero-gap);
  align-items:start;
  padding-top:16px!important;
 }
 /* A fixed ratio on the FRAME, never on individual images: slides cannot
    change the geometry as the autoplay carousel advances. */
 body .reference-home .yb-ad-section .yb-ad-carousel{
  box-sizing:border-box;
  width:100%;max-width:100%;min-width:0;
  height:auto!important;min-height:0!important;
  aspect-ratio:2 / 1!important;
  align-self:start;
  overflow:hidden!important;
  border-radius:16px!important;
  clip-path:inset(0 round 16px);
 }
 /* Render each image in exactly the same frame. The incoming, already-loaded
    picture fades over the outgoing picture; there is never an exposed empty track. */
 body .reference-home .yb-ad-section .yb-ad-track{
  display:block!important;
  position:relative;
  width:100%;height:100%;min-height:0;
  transform:none!important;
  transition:none!important;
 }
 body .reference-home .yb-ad-section .yb-ad-slide{
  box-sizing:border-box;
  position:absolute;inset:0;
  flex:none;width:100%;min-width:100%;max-width:100%;
  height:100%;min-height:0;
  overflow:hidden;
  opacity:0;visibility:hidden;z-index:1;
  transition:opacity 0s linear 620ms,visibility 0s linear 620ms;
  /* When an old upload isn't 2:1, extend the same artwork behind the
     uncropped foreground instead of showing blank side/top bands. */
  background-image:var(--msbd-hero-bg,none);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#f8f7f1;
 }
 body .reference-home .yb-ad-section .yb-ad-slide picture{
  display:block;width:100%;height:100%;min-width:0;
 }
 body .reference-home .yb-ad-section .yb-ad-slide .yb-ad-image{
  display:block;width:100%;height:100%;min-width:0;max-width:none;
  object-fit:cover!important;
  object-position:center;
  background:transparent!important;
 }
 /* Keep the first slide visible even if JS is delayed/disabled. */
 body .reference-home .yb-ad-section .yb-ad-carousel:not(.yb-ad-desktop-ready) .yb-ad-slide:first-child{
  opacity:1;visibility:visible;
 }
 body .reference-home .yb-ad-section .yb-ad-carousel.yb-ad-desktop-ready .yb-ad-slide.is-active{
  opacity:1;visibility:visible;z-index:2;
  transition:opacity 620ms ease,visibility 0s;
 }
 @media(prefers-reduced-motion:reduce){
  body .reference-home .yb-ad-section .yb-ad-carousel.yb-ad-desktop-ready .yb-ad-slide{
   transition:none!important;
  }
 }
 /* The right column's square footprint equals the height of a 2:1 left
    column because the grid tracks have widths 2fr and 1fr. */
 body .reference-home .yb-ad-section .msbd-hero-panels{
  display:grid;
  box-sizing:border-box;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:var(--msbd-hero-gap);
  width:100%;min-width:0;min-height:0;
  aspect-ratio:1 / 1;
  align-self:start;
 }
 body .reference-home .yb-ad-section :is(.msbd-hero-delivery,.msbd-hero-store){
  box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(6px,.85vw,12px);
  min-width:0;min-height:0;
  padding:clamp(10px,1.25vw,20px);
  overflow:hidden;
  border:1px solid #ece8d9;
  border-radius:16px;
  color:#124c38;
  background:radial-gradient(ellipse at 105% 100%,#e3eddf 0,transparent 55%),linear-gradient(115deg,#fff8e6,#f8f6ed);
 }
 body .reference-home .yb-ad-section .msbd-hero-delivery{
  border-color:#deeadc;
  background:radial-gradient(ellipse at 105% 100%,#d4e6d4 0,transparent 65%),linear-gradient(115deg,#f0f7ee,#e9f2e7);
 }
 body .reference-home .yb-ad-section :is(.msbd-hero-delivery,.msbd-hero-store) h2{
  margin:0;
  font-size:clamp(17px,1.7vw,28px);
  font-weight:600;line-height:1.27;letter-spacing:0;
 }
 body .reference-home .yb-ad-section .msbd-hero-store-categories{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(8px,1vw,16px);
  min-width:0;
 }
 body .reference-home .yb-ad-section .msbd-hero-store-categories>div{
  display:flex;align-items:center;
  gap:clamp(6px,.65vw,11px);
  min-width:0;
  font-size:clamp(11px,1vw,16px);
  line-height:1.3;font-weight:400;
 }
 body .reference-home .yb-ad-section .msbd-store-category-icon{
  display:grid;place-items:center;flex:none;
  width:clamp(26px,3vw,46px);height:clamp(26px,3vw,46px);
  border-radius:50%;background:#ffffffb3;
  border:1px solid #e0e8d9;color:#075c43;
 }
 body .reference-home .yb-ad-section .msbd-store-category-icon svg{
  width:56%;height:56%;
 }
 body .reference-home .yb-ad-section .yb-ad-dots{
  background:transparent!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  padding:5px!important;bottom:12px;
 }
 body .reference-home .yb-ad-section .yb-ad-dot{box-shadow:0 1px 4px #123b3266}
}
/* Three areas remain visible on narrower desktop screens without captions
   escaping their cards. Do not alter the approved <=767px phone layout. */
@media(min-width:768px) and (max-width:1000px){
 body .reference-home .yb-ad-section :is(.msbd-hero-delivery,.msbd-hero-store){
  padding:9px;gap:5px;
 }
 body .reference-home .yb-ad-section :is(.msbd-hero-delivery,.msbd-hero-store) h2{
  font-size:clamp(12px,1.55vw,15px);line-height:1.2;
 }
 body .reference-home .yb-ad-section .msbd-hero-store-categories{gap:5px 6px}
 body .reference-home .yb-ad-section .msbd-hero-store-categories>div{
  font-size:clamp(9px,1.05vw,10px);gap:5px;line-height:1.15;
 }
 body .reference-home .yb-ad-section .msbd-store-category-icon{
  width:clamp(19px,2.25vw,22px);height:clamp(19px,2.25vw,22px);
 }
}

/* Mid-size desktop: retain full heading and both icon rows inside each panel. */
@media(min-width:1001px) and (max-width:1200px){
 body .reference-home .yb-ad-section :is(.msbd-hero-delivery,.msbd-hero-store){
  padding:10px;gap:7px;
 }
 body .reference-home .yb-ad-section :is(.msbd-hero-delivery,.msbd-hero-store) h2{
  font-size:clamp(16px,1.55vw,19px);
 }
 body .reference-home .yb-ad-section .msbd-hero-store-categories{gap:8px}
 body .reference-home .yb-ad-section .msbd-store-category-icon{
  width:clamp(26px,2.7vw,33px);height:clamp(26px,2.7vw,33px);
 }
}