body .section-banner.connected-products {
  position: relative; isolation: isolate; background: #fcf8ef;
  --dock-depth: 9px;
  padding-block: clamp(30px, 3.3vw, 54px) var(--dock-depth);
}
body .section-banner.connected-products::before { content: none; }
.connected-products .products-scenery { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; z-index: 0; pointer-events: none; }
.connected-products .banner-grid { position: relative; z-index: 1; align-items: center; }
.connected-products .banner-copy {
  position: relative;
  isolation: isolate;
  align-self: start;
  min-width: 0;
  margin-top: clamp(0px, 1vw, 22px);
}
.connected-products .banner-copy { z-index: 2; text-shadow: 0 1px 3px #fffaf1; }
.connected-products .banner-copy h1 { font-size: clamp(34px, 3.65vw, 60px); color: #192e36; }
.connected-products .banner-copy > p { color: #354951; }
.connected-products .gallery-frame { min-width: 0; background-color: #fffcf6; }
@media (max-width: 760px) {
  body .section-banner.connected-products {
    padding-block-start: 22px;

  }
  .connected-products .banner-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  .connected-products .banner-copy { margin: 0 0 clamp(30px,9vw,55px); }
}

/* The gallery, connectors and stand share one responsive coordinate system. */
.connected-products .banner-grid {
  width: 92%;
  max-width: 1325px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 45.6fr) minmax(0, 40.5fr) minmax(0, 9.9fr);
  column-gap: 2%;
}
.connected-products .product-display { position: relative; width: min(100%, 536px); align-self: end; min-width: 0; isolation: isolate; }
.product-display .gallery-frame {
  padding: clamp(4px,.45vw,8px);
  border: 1px solid #90692e;
  border-radius: clamp(12px,1.2vw,24px);
  background: linear-gradient(125deg,#b09460,#fff5d8 8%,#d6ccba 23%,#fdfaf0 49%,#bba88a 74%,#eee6d7);
  box-shadow: inset 0 0 0 2px #fff7e5, inset 0 0 0 3px #aa925f, 0 3px 5px #72522130;
}
.product-display .gallery-window { border-radius: clamp(7px,.8vw,16px); aspect-ratio:4 / 3; }
.product-display .gallery-photo { width:100%; height:100%; object-fit:contain; }
.product-display .gallery-controls {
  position: absolute;
  inset: auto 10px 8px auto;
  padding: 0;
  z-index: 1;
}
.product-display .gallery-controls :is([data-step],[data-counter]) { display: none; }
.product-display .gallery-controls [data-pause] {
  min-height: 26px;
  padding: 2px 7px;
  background: #fffcf4f2;
  border: 1px solid #c5ad80;
}
.product-display .gallery-controls button { color:#243c47; border-color:transparent; background:transparent; }
.product-display .gallery-controls button:hover { background:#fff6df; }
.product-display .gallery-controls button:focus-visible { outline:2px solid #79511d; }
.product-display .display-wire { position:absolute; z-index:-1; pointer-events:none; width:22%; height:15%; fill:none; stroke:#d19a32; stroke-width:1.25; }
.product-display .wire-left { right:100%; top:34%; }
.product-display .wire-right { left:100%; top:26%; }
.product-display::before,.product-display::after {
  content:""; position:absolute; top:35%; z-index:2; width:clamp(8px,.85vw,15px);
  aspect-ratio:1; border-radius:50%; border:1px solid #a57322;
  background:radial-gradient(circle at 37% 30%,#fffdf0 15%,#f7d784 45%,#bc882a 75%);
  pointer-events:none;
}
.product-display::before { left:0; transform:translateX(-50%); }
.product-display::after { right:0; top:38%; transform:translateX(50%); }
.product-display .display-dock {
  position:absolute; z-index:-1; left:4%; right:4%; bottom:calc(0px - var(--dock-depth)); height:10px;
  border-bottom:2px solid #cfaa61; box-shadow:0 -1px 3px #996c3338;
  background:linear-gradient(105deg,transparent 6%,#b99653 6%,#f2ddae 13%,transparent 13% 86%,#d5b579 86%,#fcf1cf 94%,transparent 94%);
}
@media(max-width:760px){
  .connected-products .banner-grid { grid-template-columns:minmax(0,1fr); }
  .connected-products .product-display { width:min(88%,330px); justify-self:center; }
  .product-display .display-wire { width:8%; }
  .connected-products .products-scenery { object-fit: cover; object-position: 36% bottom; }
}

/* Keep the outer display proportional to the approved desktop composition. */
.connected-products .product-display .gallery-frame {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 536 / 404;
  display: grid;
  grid-template-rows: minmax(0,1fr);
}
.connected-products .product-display .gallery-window {
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}