/* The optional roof and veranda use the existing configurator's typography and spacing. */
.cfg-photo {
  position: relative;
  /* Retain the taller preview, trimming 5% of its former 471-unit height.
     The viewport is fixed for every finish, door and roof selection. */
  aspect-ratio: 780 / 447.45;
  overflow: hidden;
  isolation: isolate;
}
.stage-img .cfg-photo > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.stage-img .cfg-photo-previous {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity .3s ease-in-out;
}
.stage-img .cfg-photo-previous[hidden] { display: none; }
/* All non-roof views share the same camera alignment. Keep their lower
   framing, take the 5% trim from the ceiling, and gently level the rightward
   lean while retaining upright posts. The overscan prevents exposed edges.
   These rules also follow the outgoing image through the crossfade. */
.stage-img .cfg-photo > img.standard-photo,
.stage-img .cfg-photo > img.decorative-photo {
  top: -5.263157895%;
  bottom: auto;
  height: 105.263157895%;
  object-position: 50% 33%;
  transform-origin: center;
  transform: translateX(-.5%) skewY(-.3deg) scale(1.016);
}
/* Decorative sources were already cropped 93px from the top at 780px wide.
   Restore that camera offset within the same 471-unit virtual canvas used by
   the standard photos. The existing factory photo fills ONLY the padding;
   the selected finish covers the house. No source image is regenerated.
   Padding percentages use the preview width, so alignment scales together. */
.stage-img .cfg-photo > img.decorative-photo {
  box-sizing: border-box;
  padding-top: 7.117080745%;
  object-fit: cover;
  object-position: 50% 0;
  background-image: url("domio-standard-wood-aluminium.jpg");
  background-size: 100% auto;
  background-position: 50% 33%;
  background-repeat: no-repeat;
  background-origin: border-box;
}
/* 803-QA is a shorter 780x386 source with an 86px top offset. Its lower
   padding restores the matching factory floor instead of enlarging the house. */
.stage-img .cfg-photo > img.decorative-photo[src$="original-27.jpg"] {
  padding-top: 6.219644848%;
  padding-bottom: 4.67779105%;
}
/* Fill the shared landscape frame without the inset side gaps. These crops
   retain factory floor below the veranda and space above the roof peak.
   Apply the same framing to the outgoing image during the crossfade. */
.stage-img img.roof-photo { object-fit: cover; object-position: 50% 31%; }
.stage-img img.roof-photo[src$="domio-roof-standard-white-aluminium.jpg"],
.stage-img img.roof-photo[src$="domio-roof-328-da.jpg"] { object-position: 50% 27%; }
.stage-img img.roof-photo[src$="domio-roof-11-mx.jpg"] { object-position: 50% 28%; }
.stage-img img.roof-photo[src$="domio-roof-15-mb.jpg"],
.stage-img img.roof-photo[src$="domio-roof-59pz.jpg"] { object-position: 50% 29%; }
.stage-img img.roof-photo[src$="domio-roof-35-sa.jpg"] { object-position: 50% 25%; }
.stage-img img.roof-photo[src$="domio-roof-803-qa.jpg"] { object-position: 50% 50%; }
.roof-package-choice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 12px;
  border: 1px solid var(--hair);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  line-height: 1.5;
}
.roof-package-choice input { width: 22px; height: 22px; margin: 0; accent-color: var(--strong); cursor: pointer; }
.roof-package-choice.on { border-color: var(--strong); box-shadow: inset 0 0 0 1px var(--strong); }
.roof-package-choice:focus-within { outline: 2px solid var(--strong); outline-offset: 3px; }
.roof-package-price { color: var(--sand); font-size: 12px; white-space: nowrap; }
.roof-package-hint { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 12px 0 0; }
@media(max-width:719px) {
  .roof-package-choice { font-size: 13px; padding: 12px 10px; gap: 9px; min-height: 54px; }
  .roof-package-price { font-size: 11px; }
  .roof-package-hint { font-size: 12px; line-height: 1.5; margin-top: 8px; }
  .roof-package-choice { scroll-margin-top: calc(var(--order-nav-height,73px) + var(--order-preview-height,250px) + 12px); }
}
@media(max-width:359px) {
  .roof-package-choice { grid-template-columns: 22px minmax(0,1fr); }
  .roof-package-price { grid-column: 2; }
}
@media(prefers-reduced-motion:reduce) {
  .stage-img .cfg-photo-previous { transition: none; }
}