/* MSBD 3.2.7 — full-bleed hero artwork, matching content alignment and rounded corners. */
/* Keep the advertisement, filters and product grid on exactly the same horizontal grid. */
.reference-home > section.container:is(.yb-ad-section,.yb-quick-filters,.reference-collection,.yb-about-block){
  box-sizing:border-box;
  width:min(1480px,calc(100% - 56px))!important;
  max-width:1480px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
/* Restore the old spacious, rounded hero footprint, without adding any content overlays. */
.reference-home > section.container.yb-ad-section{
  display:block!important;
  padding-top:24px!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}
.reference-home .yb-ad-section .yb-ad-carousel{
  position:relative;
  display:block;
  width:100%;
  height:clamp(330px,33.8vw,500px);
  aspect-ratio:auto!important;
  isolation:isolate;
  overflow:hidden!important;
  border-radius:21px!important;
  clip-path:inset(0 round 21px);
  background:#faf8f2;
}
.reference-home .yb-ad-section .yb-ad-track{
  display:flex;
  height:100%;
  width:100%;
  transform:translate3d(0,0,0);
  transition:transform .9s cubic-bezier(.25,.8,.25,1);
  will-change:transform;
}
.reference-home .yb-ad-section .yb-ad-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  min-width:0;
  overflow:hidden;
}
.reference-home .yb-ad-section .yb-ad-slide picture{display:block;width:100%;height:100%}
/* Full-bleed images: prevent blank side gutters from contain/letterboxing. */
.reference-home .yb-ad-section .yb-ad-slide .yb-ad-image{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  object-fit:cover;
  object-position:center;
}
@media(max-width:1024px){
  .reference-home > section.container:is(.yb-ad-section,.yb-quick-filters,.reference-collection,.yb-about-block){
    width:calc(100% - 32px)!important;
    max-width:none!important;
  }
  .reference-home .yb-ad-section .yb-ad-carousel{
    height:auto;
    aspect-ratio:2.55/1!important;
    border-radius:17px!important;
    clip-path:inset(0 round 17px);
  }
}
@media(max-width:680px){
  .reference-home > section.container:is(.yb-ad-section,.yb-quick-filters,.reference-collection,.yb-about-block){
    width:calc(100% - 26px)!important;
  }
  .reference-home > section.container.yb-ad-section{padding-top:13px!important}
  .reference-home .yb-ad-section .yb-ad-carousel{
    aspect-ratio:16/9!important;
    border-radius:15px!important;
    clip-path:inset(0 round 15px);
  }
}
@media(max-width:480px){
  .reference-home .yb-ad-section .yb-ad-carousel{
    aspect-ratio:5/4!important;
    border-radius:13px!important;
    clip-path:inset(0 round 13px);
  }
}
@media(prefers-reduced-motion:reduce){
  .reference-home .yb-ad-section .yb-ad-track{transition:none!important}
}

/* MSBD 3.2.9 — centered premium dot navigation and pointer drag; no arrows/text overlays. */
.reference-home .yb-ad-section .yb-ad-carousel.yb-ad-interactive{
  cursor:grab;
  touch-action:pan-y;
}
.reference-home .yb-ad-section .yb-ad-carousel.is-dragging{cursor:grabbing}
.reference-home .yb-ad-section .yb-ad-carousel .yb-ad-image{
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.reference-home .yb-ad-section .yb-ad-carousel .yb-ad-track{
  transition:transform 1050ms cubic-bezier(.22,.82,.24,1);
  will-change:transform;
}
.reference-home .yb-ad-section .yb-ad-dots{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:clamp(12px,1.8vw,22px);
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid rgba(255,255,255,.56);
  background:rgba(3,46,33,.54);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 5px 22px rgba(0,35,25,.14);
  border-radius:999px;
  padding:8px 12px;
  max-width:calc(100% - 24px);
  flex-wrap:wrap;
}
.reference-home .yb-ad-section .yb-ad-dot{
  appearance:none;
  -webkit-appearance:none;
  width:11px;
  height:11px;
  min-width:11px;
  min-height:11px;
  flex:0 0 11px;
  margin:0;
  padding:0;
  border:1.5px solid rgba(255,255,255,.8);
  border-radius:50%;
  background:rgba(255,255,255,.38);
  box-shadow:none;
  opacity:.9;
  cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.reference-home .yb-ad-section .yb-ad-dot:hover{
  background:#fff;
  transform:scale(1.12);
}
.reference-home .yb-ad-section .yb-ad-dot[aria-current="true"]{
  background:#f2cb6e;
  border-color:#fff7e1;
  opacity:1;
  box-shadow:0 0 0 3px rgba(242,203,110,.27),0 0 9px rgba(242,203,110,.35);
  transform:scale(1.16);
}
.reference-home .yb-ad-section .yb-ad-dot:focus-visible{
  outline:2px solid #fff;
  outline-offset:5px;
}
@media(max-width:680px){
  .reference-home .yb-ad-section .yb-ad-dots{gap:8px;padding:7px 11px;bottom:10px}
  .reference-home .yb-ad-section .yb-ad-dot{width:10px;height:10px;min-width:10px;min-height:10px;flex-basis:10px}
}
@media(prefers-reduced-motion:reduce){
  .reference-home .yb-ad-section .yb-ad-dot{transition:none}
}